CSS 偽類（pseudoclass）能夠讓你為連結的每個狀態（連結<link>、已訪問<visited>、懸停<hover>、啟用<active>）建立獨立的樣式。
建立斜面邊緣效果
要使一個按鈕具有3D斜面邊緣效果，需要類比一個光源，以在一個凸起按鈕的邊緣建立加亮區和陰影區。如果光源在上面稍微偏向按鈕的左邊，那麼按鈕的頂部和左側就會比按鈕
表面更亮，而底部和右側就會比按鈕表面更暗。
所以，建立立體效果的秘密是使用 CSS 邊界類比按鈕的側面，並為每個邊界的使用稍微不同的顏色，具體的顏色方案要根據它所表示的是光亮的一側還是陰暗的一側而定。為了看
上去更加真實，邊界應該具有斜接角，CSS 邊界能夠很好地滿足這一需要。
方法1：使用inset/outset（嵌入線/浮出線）邊界.
有一個 CSS 邊界屬效能夠自動產生合理的斜面邊緣類比效果。你只須為按鈕樣式的 border-style 屬性指定為 inset 或者 outset即可。瀏覽器會以稍微不同的背景色陰影來處理
元素邊界的表現細節，從而得到期望的效果。outset屬性類比凸起按鈕的陰影邊緣，inset 屬性通過反轉陰影來類比按鈕被按下的情景。
展示了實際的 inset/outset 邊界效果。這個例子是由一些非常簡單的代碼產生的。XHTML 非常簡單，只包含一些按鈕標籤（label）和連結。
<body>
<div id="buttonA">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html">Button 2</a></li>
<li><a href="link3.html">Button 3</a></li>
</ul>
</div>
</body>
CSS 樣式使這種方法與設計普通的平面按鈕的樣式非常相似。唯一多出來的地方是這裡將 border-style: outset和 border-style: inset規則同 border-width設定組合使用，後
者將邊界寬度設定的足夠大以使其可見。
body {
margin: 0px;
padding: 0px;
}
div#buttonA {
margin-left: 50px;
}
div#buttonAul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonAli {
list-style-type: none;
height: 30px;
width: 125px;
margin: 20px;
text-align:center;
}
div#buttonAli a {
height: 100%;
width: 100%;
display: block;
text-decoration: none;
border-width: 6px;
}
div#buttonAlia:link {
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
border-style: outset;
}
div#buttonAlia:visited {
color: #000000;
font-weight: normal;
background-color: #CCCCCC;
border-style: outset;
}
div#buttonAlia:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #999999;
border-style: outset;
}
div#buttonAlia:active {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-style: inset;
}
//光之翼 QQ：272912705 www.hi.baidu.com/jcomet
div#buttonAul規則設定常規文本的尺寸和間距，div#buttonAli規則去除清單項目的預設項目符號（list-style-type: none）並設定按鈕框的尺寸。div#buttonAli a規則使整個按
鈕可點擊（height: 100%; width: 100%; display: block;），它還是設定邊界寬度的一個很方便的地方。
樣式的其餘部分控制不同按鈕狀態的外觀變化。所有偽類（:link、:visited、:hover、:active）都有一個 color、font-weight、background-color 和 border-style 規則。除
div#buttonAlia:active規則之外，所有樣式都使用 border-style: outset規則，div#buttonAlia:active使用 border-style:inset規則。這樣就使按鈕狀態有一個凸起的外觀—
—當然要將按鈕被點擊時的情況除外，在按鈕被點擊時它呈現被按下的狀態。
不同的瀏覽器呈現 inset 和 outset 邊界的方式有很大的不同。Internet Explorer 建立更加精細的效果，在每個邊界的內邊緣有一個加亮區，在外邊緣有一個陰影區。而另一方
面，Netscape 則以固定的顏色呈現每個邊界，這樣就產生一個比較有突邊的，不怎麼圓滑的外觀效果。
方法2：控制單個側面
使用 inset/outset 邊界樣式是類比3D效果的一種簡單快捷的方法。然而，這不是唯一的方法。如果你不喜歡標準的效果，或者你為瀏覽器在表現方式上的差別而困擾，那麼你可
以自己控制邊界的顏色來產生你想要的效果。
除了使用能border-style 的 inset/outset 屬性以及讓瀏覽器處理每個邊界的實際顏色之外，你還可以使用自己的樣式規則為每個邊界單獨設定顏色。
Figure B shows the results of using a style sheet that specifies the colors of each button side individually. The markup is the same as in Figure A. Here's
the CSS code:
圖 B展示了使用這種方法得出的3D按鈕效果，這裡樣式表單獨指定每個按鈕側面的顏色。圖 B 所用標記與圖 A 中的一樣，下面是 CSS 代碼：
body {
margin: 0px;
padding: 0px;
}
div#buttonA {
margin-left: 50px;
}
div#buttonAul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonAli {
list-style-type: none;
height: 30px;
width: 125px;
margin: 10px;
text-align:center;
}
div#buttonAli a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:link {
color: #000000;
font-weight: bold;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:visited {
color: #000000;
font-weight: normal;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #777777;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:active {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-style: solid;
border-top-color: #333333;
border-left-color: #555555;
border-right-color: #BBBBBB;
border-bottom-color: #DDDDDD;
}
儘管這塊代碼明顯要比前一個例子中的 CSS 代碼要長，但並不是兩者間的主要區別。它們的主要區別在於這裡使用了一個 border-style: solid規則替換了原來的 border-style:
outset (或 border-style: inset) 規則，後接幾個規則單獨設定每個邊界的顏色（border-top-color: #DDDDDD等）。
使用這一方法，你可以完全控制按鈕側面的顏色。也就是說完全由你決定選擇合適的顏色來獲得你所要的效果——而且，你還要記住交換顏色以使按鈕在處於 :active 狀態時產生
被按下的效果。控制這些細節的優點是你可以設定獨立的側面和頂部加亮區的顏色，而且最後的結果在所有瀏覽器表現更加一致。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
