UI要求越來越高，界面越做越華麗，給我們開發(fā)人員帶來的就是使用大量的背景圖片，下面介紹一些通過css(不使用圖片或少使用圖片)來實現(xiàn)一些很常見的效果，
圓角效果
圓角用的越來越多，因為圓角確實好看，效果如下：
要實現(xiàn)上面的圓角，一般切圖是左，右(或上下)各切1個圖片做背景，但這樣做只適合固定寬度或高度的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*/
}
但IE9以下的版本都不支持圓角,所以上面的效果在ie9以下顯示還是直角的.
目前我們針對ie9以下的瀏覽器使用下面的方法實現(xiàn)，切1個透明的圓形圖片(這個圖片要求圓角內測是透明的，而外側是不透明的)，用絕對定位來顯示4個圓角，這樣做的好處是只使用1個圖片，即可以實現(xiàn)任何大小，任何背景顏色的box圓角，但缺點就是需要多余的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，所以效果不太好看(不像真真的圓角)。效果如下：
陰影效果
大家注意我簽名的陰影效果，如果要實現(xiàn)這樣的效果，使用圖片，切圖都很麻煩，讓我們看看css如何實現(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語法*/
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/*IE8語法,可惡的IE，不同的版本還要寫的不一樣*/
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')"
}
注：針對IE的filter,再測試過程中發(fā)現(xiàn)必須加height和background-color,如果不設置height，則無陰影效果，如果不設置背景色，則陰影效果不是作用在box 上，而是在文字上，原因不是很清楚，有興趣的同學可以自己測下。
漸變效果：
這個效果也應該也是用的最多的，這次先上效果：
代碼：
.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ā)光效果：
這個效果在我簽名中的評論按鈕實現(xiàn)了(我簽名的效果沒有考慮IE6,IE7)，大家看到那幾個按鈕，都有些發(fā)光效果，而且鼠標移上去也有效果，可能有人看到以為我用了很多圖片，其實只用了2個png圖片，1個圖片是上半部分完全透明，下半部分半透明，另1個圖片是上半部分半透明，下半部分完全透明。用這2個圖片+背景色就可以實現(xiàn)所有按鈕的發(fā)光效果。因為我的簽名中使用data:image/png;base64嵌入的圖片，所以不支持IE6,IE7。
DEMO效果(該效果在IE6下看不出來，是因為沒有對PNG進行處理)：
代碼：
<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：本文中只是做一些簡單的介紹，每種效果都沒做很詳細的說明，對于具體方法的使用，請大家自己查查資料。