使用字符实现的圆角

时间：2010-10-21 来源：chemdemo

当今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;margin:3em;position:relative;}
.c{background-color:#FFF;color:orange;float:left;width:8px;overflow:hidden;font-family:'宋体';position:absolute;}
.c b{float:left;font-size:16px;line-_line-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;}

很聪明的办法，技术的关键是四个四分之一圆弧的获得。笔者在操作中使用了strict DTD，结果导致左右下角两个圆弧显示分别和左右上角两个圆弧一样，改为过渡型后正常；还有，字符字体最好是使用宋体，其他字体font-size无法控制大小（或很难控制或出于字体支持程度考虑）。

相关阅读更多 +