AI专业者开发社区 1 号成员
  •  0 回帖  •  17 浏览  •  4 个月前
 

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;
    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：本文中只是做一些简单的介绍，每种效果都没做很详细的说明，对于具体方法的使用，请大家自己查查资料。


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