CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能
UI要求越来越高，界面越做越华丽，给我们开发人员带来的就是使用大量的背景图片，下面介绍一些通过css(不使用图片或少使用图片)来实现一些很常见的效果，
圆角效果
圆角用的越来越多，因为圆角确实好看，效果如下：
要实现上面的圆角，一般切图是左，右(或上下)各切1个图片做背景，但这样做只适合固定宽度或高度的box,而且如果box背景不一样，图片需要另外切。
现在很多浏览器都支持圆角的css，css3也支持，代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
.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
;
}
|
但IE9以下的版本都不支持圆角,所以上面的效果在ie9以下显示还是直角的.
目前我们针对ie9以下的浏览器使用下面的方法实现，切1个透明的圆形图片(这个图片要求圆角内测是透明的，而外侧是不透明的)，用绝对定位来显示4个圆角，这样做的好处是只使用1个图片，即可以实现任何大小，任何背景颜色的box圆角，但缺点就是需要多余的HTML代码，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
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，所以效果不太好看(不像真真的圆角)。效果如下：
阴影效果
大家注意我签名的阴影效果，如果要实现这样的效果，使用图片，切图都很麻烦，让我们看看css如何实现吧，代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
.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')"
}
|
注：针对IE的filter,再测试过程中发现必须加height和background-color,如果不设置height，则无阴影效果，如果不设置背景色，则阴影效果不是作用在box 上，而是在文字上，原因不是很清楚，有兴趣的同学可以自己测下。
渐变效果：
这个效果也应该也是用的最多的，这次先上效果：
代码：
|
1
2
3
4
5
6
7
|
.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)"
;
}
|
按钮发光效果：
这个效果在我签名中的评论按钮实现了(我签名的效果没有考虑IE6,IE7)，大家看到那几个按钮，都有些发光效果，而且鼠标移上去也有效果，可能有人看到以为我用了很多图片，其实只用了2个png图片，1个图片是上半部分完全透明，下半部分半透明，另1个图片是上半部分半透明，下半部分完全透明。用这2个图片+背景色就可以实现所有按钮的发光效果。因为我的签名中使用data:image/png;base64嵌入的图片，所以不支持IE6,IE7。
DEMO效果(该效果在IE6下看不出来，是因为没有对PNG进行处理)：
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
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：本文中只是做一些简单的介绍，每种效果都没做很详细的说明，对于具体方法的使用，请大家自己查查资料。
评论更新：本来设置个快捷评论，没想到很多朋友都随便点着玩，虽然赚去了很多评论数，但大部分都是无意义的评论，而不是技术交流的评论，所以决定把快捷评论关闭掉，并以后再也不启用该功能了。希望大家都用心交流。