UI要求越來(lái)越高，界面越做越華麗，給我們開(kāi)發(fā)人員帶來(lái)的就是使用大量的背景圖片，下面介紹一些通過(guò)css(不使用圖片或少使用圖片)來(lái)實(shí)現一些很常見(jiàn)的效果，
圓角效果
圓角用的越來(lái)越多，因為圓角確實(shí)好看，效果如下：
要實(shí)現上面的圓角，一般切圖是左，右(或上下)各切1個(gè)圖片做背景，但這樣做只適合固定寬度或高度的box,而且如果box背景不一樣，圖片需要另外切。
現在很多瀏覽器都支持圓角的css，css3也支持，代碼如下：
03 | text-align:center;width:200px;line-height:60px; |
04 | border:1px solid #C0C0C0;background-color:#DBEAFF; |
06 | -moz-border-radius: 5px; |
10 | -webkit-border-radius: 5px; |
但IE9以下的版本都不支持圓角,所以上面的效果在ie9以下顯示還是直角的.
目前我們針對ie9以下的瀏覽器使用下面的方法實(shí)現，切1個(gè)透明的圓形圖片(這個(gè)圖片要求圓角內測是透明的，而外側是不透明的)，用絕對定位來(lái)顯示4個(gè)圓角，這樣做的好處是只使用1個(gè)圖片，即可以實(shí)現任何大小，任何背景顏色的box圓角，但缺點(diǎn)就是需要多余的HTML代碼，代碼如下：
01 | <style type="text/css"> |
03 | text-align:center;width:200px;line-height:60px; |
04 | background-color:#DBEAFF; |
09 | .r_2{background-position:-3px 0;top:0;right:0;} |
10 | .r_3{background-position:0 -3px;left:0;bottom:0;} |
11 | .r_4{background-position:-3px -3px;bottom:0;right:0;} |
14 | <div class="b_box_ie"> |
16 | <div class="b_r r_1"></div> |
17 | <div class="b_r r_2"></div> |
18 | <div class="b_r r_3"></div> |
19 | <div class="b_r r_4"></div> |
因我切的圖片是gif，而不是png，所以效果不太好看(不像真真的圓角)。效果如下：
陰影效果
大家注意我簽名的陰影效果，如果要實(shí)現這樣的效果，使用圖片，切圖都很麻煩，讓我們看看css如何實(shí)現吧，代碼：
02 | height:60px;line-height:60px; |
03 | width:200px;border:1px solid #C0C0C0;background-color:#DBEAFF; |
04 | -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); |
05 | -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); |
06 | box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); |
08 | filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray'); |
10 | -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')" |
注：針對IE的filter,再測試過(guò)程中發(fā)現必須加height和background-color,如果不設置height，則無(wú)陰影效果，如果不設置背景色，則陰影效果不是作用在box 上，而是在文字上，原因不是很清楚，有興趣的同學(xué)可以自己測下。
漸變效果：
這個(gè)效果也應該也是用的最多的，這次先上效果：
代碼：
2 | text-align:center;width:200px;line-height:60px; |
3 | background-image: -moz-linear-gradient(top, #BDD738, #7E9516); |
4 | background-image: -webkit-gradient(linear, left top, left bottom, from(#BDD738), to(#7E9516)); |
5 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738,endColorstr=#7E9516); |
6 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738,endColorstr=#7E9516)"; |
按鈕發(fā)光效果：
這個(gè)效果在我簽名中的評論按鈕實(shí)現了(我簽名的效果沒(méi)有考慮IE6,IE7)，大家看到那幾個(gè)按鈕，都有些發(fā)光效果，而且鼠標移上去也有效果，可能有人看到以為我用了很多圖片，其實(shí)只用了2個(gè)png圖片，1個(gè)圖片是上半部分完全透明，下半部分半透明，另1個(gè)圖片是上半部分半透明，下半部分完全透明。用這2個(gè)圖片+背景色就可以實(shí)現所有按鈕的發(fā)光效果。因為我的簽名中使用data:image/png;base64嵌入的圖片，所以不支持IE6,IE7。
DEMO效果(該效果在IE6下看不出來(lái)，是因為沒(méi)有對PNG進(jìn)行處理)：
代碼：
03 | padding:5px 10px;color: #fff; |
05 | text-decoration: none;font-weight: bold; |
11 | <a class="b_btn" href="javascript:void(0);" style="background-color:#2daebf;">精彩推薦</a> |
12 | <a class="b_btn" href="javascript:void(0);" style="background-color:#e33100;">水平一般</a> |
PS：本文中只是做一些簡(jiǎn)單的介紹，每種效果都沒(méi)做很詳細的說(shuō)明，對于具體方法的使用，請大家自己查查資料。
評論更新：本來(lái)設置個(gè)快捷評論，沒(méi)想到很多朋友都隨便點(diǎn)著(zhù)玩，雖然賺去了很多評論數，但大部分都是無(wú)意義的評論，而不是技術(shù)交流的評論，所以決定把快捷評論關(guān)閉掉，并以后再也不啟用該功能了。希望大家都用心交流。
