使用字符实现的圆角

最新推荐文章于 2021-06-17 05:36:35 发布

转载最新推荐文章于 2021-06-17 05:36:35 发布 · 121 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chemdemo/archive/2010/10/21/1857882.html

参考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;}

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

转载于:https://www.cnblogs.com/chemdemo/archive/2010/10/21/1857882.html