UI要求越來(lái)越高，界面越做越華麗，給我們開(kāi)發(fā)人員帶來(lái)的就是使用大量的背景圖片，下面介紹一些通過(guò)css(不使用圖片或少使用圖片)來(lái)實(shí)現(xiàn)一些很常見(jiàn)的效果，
圓角效果
圓角用的越來(lái)越多，因?yàn)閳A角確實(shí)好看，效果如下：
要實(shí)現(xiàn)上面的圓角，一般切圖是左，右(或上下)各切1個(gè)圖片做背景，但這樣做只適合固定寬度或高度的box,而且如果box背景不一樣，圖片需要另外切。
現(xiàn)在很多瀏覽器都支持圓角的css，css3也支持，代碼如下：
.b_box{
text-align:center;width:200px;line-height:60px;
border:1px solid #C0C0C0;background-color:#DBEAFF;
/*firefox*/
-moz-border-radius: 5px;
/*css3*/
border-radius: 5px;
/*webkit*/
}
但I(xiàn)E9以下的版本都不支持圓角,所以上面的效果在ie9以下顯示還是直角的.
目前我們針對(duì)ie9以下的瀏覽器使用下面的方法實(shí)現(xiàn)，切1個(gè)透明的圓形圖片(這個(gè)圖片要求圓角內(nèi)測(cè)是透明的，而外側(cè)是不透明的)，用絕對(duì)定位來(lái)顯示4個(gè)圓角，這樣做的好處是只使用1個(gè)圖片，即可以實(shí)現(xiàn)任何大小，任何背景顏色的box圓角，但缺點(diǎn)就是需要多余的HTML代碼，代碼如下：
<style type="text/css">
.b_box_ie{
text-align:center;width:200px;line-height:60px;
background-color:#DBEAFF;
position:relative;
}
.b_r{width:3px;height:3px;font-size:0;background:url(http://pic002.cnblogs.com/img/bearstar/201006/2010062419324216.gif) no-repeat;position:absolute;}
.r_1{top:0;left:0;}
.r_2{background-position:-3px 0;top:0;right:0;}
.r_3{background-position:0 -3px;left:0;bottom:0;}
.r_4{background-position:-3px -3px;bottom:0;right:0;}<style>
<div class="b_box_ie">
CSS 小技巧
<div class="b_r r_1"></div>
<div class="b_r r_2"></div>
<div class="b_r r_3"></div>
<div class="b_r r_4"></div>
</div>
因我切的圖片是gif，而不是png，所以效果不太好看(不像真真的圓角)。效果如下：
陰影效果
大家注意我簽名的陰影效果，如果要實(shí)現(xiàn)這樣的效果，使用圖片，切圖都很麻煩，讓我們看看css如何實(shí)現(xiàn)吧，代碼：
.b_shadow{
height:60px;line-height:60px;
width:200px;border:1px solid #C0C0C0;background-color:#DBEAFF;
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/*IE6,IE7語(yǔ)法*/
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/*IE8語(yǔ)法,可惡的IE，不同的版本還要寫(xiě)的不一樣*/
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')"
}
結(jié)合圓角，實(shí)現(xiàn)效果如下：
注：針對(duì)IE的filter,再測(cè)試過(guò)程中發(fā)現(xiàn)必須加height和background-color,如果不設(shè)置height，則無(wú)陰影效果，如果不設(shè)置背景色，則陰影效果不是作用在box 上，而是在文字上，原因不是很清楚，有興趣的同學(xué)可以自己測(cè)下。
漸變效果：
這個(gè)效果也應(yīng)該也是用的最多的，這次先上效果：
代碼：
.gradients{
text-align:center;width:200px;line-height:60px;
background-image: -moz-linear-gradient(top, #BDD738, #7E9516);
background-image:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738,endColorstr=#7E9516)";
}
按鈕發(fā)光效果：
這個(gè)效果在我簽名中的評(píng)論按鈕實(shí)現(xiàn)了(我簽名的效果沒(méi)有考慮IE6,IE7)，大家看到那幾個(gè)按鈕，都有些發(fā)光效果，而且鼠標(biāo)移上去也有效果，可能有人看到以為我用了很多圖片，其實(shí)只用了2個(gè)png圖片，1個(gè)圖片是上半部分完全透明，下半部分半透明，另1個(gè)圖片是上半部分半透明，下半部分完全透明。用這2個(gè)圖片+背景色就可以實(shí)現(xiàn)所有按鈕的發(fā)光效果。因?yàn)槲业暮灻惺褂胐ata:image/png;base64嵌入的圖片，所以不支持IE6,IE7。
DEMO效果(該效果在IE6下看不出來(lái)，是因?yàn)闆](méi)有對(duì)PNG進(jìn)行處理)：
代碼：
<style>
.b_btn{
padding:5px 10px;color: #fff;
background:url(http://pic002.cnblogs.com/img/bearstar/201006/2010062420253961.png) repeat-x;
text-decoration: none;font-weight: bold;
}
.b_btn:hover{
background:url(http://pic002.cnblogs.com/img/bearstar/201006/2010062420254656.png) repeat-x;
}</style>
<a class="b_btn" href="javascript:void(0);" style="background-color:#2daebf;">精彩推薦</a>
<a class="b_btn" href="javascript:void(0);" style="background-color:#e33100;">水平一般</a>
PS：本文中只是做一些簡(jiǎn)單的介紹，每種效果都沒(méi)做很詳細(xì)的說(shuō)明，對(duì)于具體方法的使用，請(qǐng)大家自己查查資料。