使用css3画"静音"icon

使用css3画"静音"icon

先看看画出来的效果：注意没有使用图片，而是在支持css3的浏览器(Firefox 3.5+, Chrome 5, and Opera 10.6)中的纯css画出来的icon效果截图，而且html代码也非常简单。仔细观察静音的这个icon,由4部分构成，一个圆圈，一个斜线，一个正方形，一个三角形。圆圈可以使用css3里面的圆角实现。斜线可以是一个元素的边框，然后经过转45度得到。正方形就不用说了。三角形可以使用边框来实现。如果给每个元素一个标签，可想html结构是比较复杂，幸好可以使用:before :after伪元素来实现。代码:
<style type="text/css">.mute{font: 50px/1.4 "Microsoft YaHei";position:relative;z-index:1;overflow:hidden; padding-left:50px;}.mute a{text-decoration:none; color:#444; font-weight:bold;}/*将4个元素的坐标原点成容器的左中*/.mute:before, .mute:after, .mute a:before, .mute a:after {    content: "";    position: absolute;    top: 50%;    left: 0;}/*.mute前面的伪元素实现圆圈*/.mute:before{    width: 40px;    height: 40px;    border: 1px solid #C55500;    margin-top: -19px;    -webkit-border-radius: 40px;/*圆角半径为元素宽度，这样，每一个圆角成为1/4圆*/    -moz-border-radius: 40px;    border-radius: 40px;}/*.mute后面的伪元素实现斜线，边框旋转45度得到*/.mute:after {    width: 40px;    border-top: 1px solid #C55500;    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);}/*a的前面伪元素实现三角形*/.mute a:before {    left: -3px;    border: 17px solid transparent;    border-right-color: #C55500;    margin-top: -16px;    background: transparent;}/*a后面的伪元素画一个正方形放在合适的位置*/.mute a:after {    height: 16px;    left: 8px;    margin-top: -8px;    width: 16px;    background-color:#C55500;}</style><!-- html就这么简单 --><span class="mute"><a href="###">Mute</a></span>使用css3实现的icon的最大优点在于可以自由的改变icon的颜色，而不是做很多图片，icon更像是用画笔画出来的，可控性强，易于修改和扩展。参考资料：更多的css icon3 demo: http://nicolasgallagher.com/pure-css-gui-icons/demo原作者博文：http://nicolasgallagher.com/pure-css-gui-icons/更多使用伪元素实现的特效：http://www.haipi8.com/css/347css border的妙用：http://www.classyuan.com/?p=252