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 ;
  }
效果:
CSS 小技巧

    但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 小技巧
 
 
 
 
    
CSS 小技巧
 
 
 
 

 

阴影效果

    大家注意我签名的阴影效果,如果要实现这样的效果,使用图片,切图都很麻烦,让我们看看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')"
}
结合圆角,实现效果如下:
CSS 小技巧

 

    注:针对IE的filter,再测试过程中发现必须加height和background-color,如果不设置height,则无阴影效果,如果不设置背景色,则阴影效果不是作用在box     上,而是在文字上,原因不是很清楚,有兴趣的同学可以自己测下。

 

渐变效果:

     这个效果也应该也是用的最多的,这次先上效果:

CSS 小技巧

    代码:

?
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;
     text-decoration: none;font-weight: bold;
}
.b_btn:hover{
}
</ 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:本文中只是做一些简单的介绍,每种效果都没做很详细的说明,对于具体方法的使用,请大家自己查查资料。

 

评论更新:本来设置个快捷评论,没想到很多朋友都随便点着玩,虽然赚去了很多评论数,但大部分都是无意义的评论,而不是技术交流的评论,所以决定把快捷评论关闭掉,并以后再也不启用该功能了。希望大家都用心交流。

[作者]:BearRui(AK-47)
[博客]:  http://www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.

你可能感兴趣的:(css)