越来越多的华丽界面，就需要开发人员使用大量的背景图片，下面介绍一些通过css(不使用图片或少使用图片)来实现一些很常见的效果。
圆角效果
现在圆角使用的越来越多，因实圆角确实好看，代码如下：
实现圆角，一般切图是左，右(或上下)各切1个图片做背景，但这样做只适合固定宽度或高度的box,而且如果box背景不一样，图片需要另外切。
现在很多浏览器都支持圆角的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*/
-webkit-border-radius: 5px;
}
CSS 小技巧
但IE9以下的版本都不支持圆角,所以上面的效果在ie9以下显示还是直角的.
我们针对ie9以下的浏览器使用下面的方法实现，切1个透明的圆形图片(这个图片要求圆角内测是透明的，而外侧是不透明的)，用绝对定位来显示4个圆角，
这样做的好处是只使用1个图片，即可以实现任何大小，任何背景颜色的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>
要实现阴影的效果，使用图片，切图都很麻烦，让我们看看css如何实现吧，代码：
复制代码 代码示例:
.b_shadow{
height:60px;line-height:60px;
width:200px;border:1px solid #C0C0C0;background-color:#DBEAFF;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-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')"
}
CSS 小技巧
注：针对IE的filter,再测试过程中发现必须加height和background-color,如果不设置height，则无阴影效果，如果不设置背景色，
则阴影效果不是作用在box上，而是在文字上，原因不太清楚，有兴趣的同学自己测下。
渐变效果：
这个效果也应该也是用的最多的。
CSS小技巧 代码：
复制代码 代码示例:
.gradients{
text-align:center;width:200px;line-height:60px;
background-image: -moz-linear-gradient(top, #BDD738, #7E9516);
background-image: -webkit-gradient(linear, left top, left bottom, from(#BDD738), to(#7E9516));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738,endColorstr=#7E9516);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738,endColorstr=#7E9516)";
}
按钮发光效果
代码如下：
复制代码 代码示例:
<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>
本文中只是做一些简单的介绍，不是很详细，对于具体方法的使用，请大家再仔细查看资料。
