参考zhangxinxu的“告别图片—使用字符实现兼容性的圆角尖角效果beta版”,写的一个使用字符实现圆角的效果。
当今WEB设计是一个追求性能的时代,多一张图片就意味着多一次HTTP请求,使用css设计一些简单的效果代替图片,我觉得是一种听起来就很“鸡冻”的做法,终于可以摆脱设计的瓶颈,把主动权把握在自己手里了,呵呵。在这里只是抛砖引玉,CSS博大精深,我们探索的脚步不应该停止。
闲话不扯了,源码奉上:
<div class="box">
<b class="c l t"><b>●</b></b>
<b class="c r t"><b class="ml">●</b></b>
<b class="c l b"><b class="mt">●</b></b>
<b class="c r b"><b class="mtl">●</b></b>
<p><br />Text...</p>
</div>
.box{background-color:orange;width:500px;height:100px;margin:3em;position:relative;}
.c{background-color:#FFF;color:orange;float:left;width:8px;height:8px;overflow:hidden;font-family:'宋体';position:absolute;}
.c b{float:left;font-size:16px;line-height:1;_line-height:1.1;font-weight:normal;}
.ml{margin-left:-7px;}
.mt{margin-top:-7px;}
.mtl{margin:-7px 0 0 -7px;}
.t{top:-1px;}
.b{bottom:-1px;}
.l{left:-1px;}
.r{right:-1px;}
<div class="box box2">
<b class="c l t"><b>●</b></b>
<b class="c r t"><b class="ml">●</b></b>
<b class="c l b"><b class="mt">●</b></b>
<b class="c r b"><b class="mtl">●</b></b>
<p><br />Text...</p>
<b class="c c2 l2 t2"><b>●</b></b>
<b class="c c2 r2 t2"><b class="ml">●</b></b>
<b class="c c2 l2 b2 "><b class="mt">●</b></b>
<b class="c c2 r2 b2"><b class="mtl">●</b></b>
</div>
.box2{background-color:#F8F8F8;border:1px solid orange;}
.c2{background-color:transparent;color:#F8F8F8;}
.t2{top:0;}
.b2{bottom:0;}
.l2{left:0;}
.r2{right:0;}