css技巧：实现圆角、阴影、透明效果

CSS技巧：圆角效果

        需要切1个透明的圆形图片(这个图片要求圆角内侧是透明的，外侧是不透明的

)，用绝对定位来显示4个圆角，这样做的好处是只使用1个图片，就可以实现任何大小，任何背景颜色的box圆角，代码如下：

<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(2010062419324216.gif)no-repeat;position:absolute;}

    .r_1{top:0;left:0;}

    .r_2{background-position:-3px0;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_rr_1"></div>

    <div class="b_rr_2"></div>

    <div class="b_rr_3"></div>

    <div class="b_rr_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);

/*IE*/ 

     filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color='gray');

}

<div class="b_shadow">CSS阴影</div>

效果：



css技巧：半透明效果

<style>

     .div1 a:hover img{filter:alpha(Opacity=80); opacity: 0.8}

</style>

<p>鼠标移动到A超链接时，超链接内图片（img）呈现半透明显示80%效果。</p>

<div class="div1">

     <a href="#"><img src="999.jpg"/></a>

</div>

解释：
filter 设置IE半透明效果样式，值1-100，值越小越透明

opacity对非IE浏览器设置，比如火狐