展示、记录一个css圆角效果 ⁴

这里是内容——dimlau.com
222

具体代码如下

css部分：

.l1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#81BC3B; margin:0 5px;}
.l2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#81BC3B; 
border-right:2px solid #81BC3B; border-left:2px solid #81BC3B; margin:0 3px;}
.l3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#81BC3B; 
border-right:1px solid #81BC3B; border-left:1px solid #81BC3B; margin:0 2px;}
.l4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#81BC3B; 
border-right:1px solid #81BC3B; border-left:1px solid #81BC3B; margin:0 1px;}
.lcon{border-right:1px solid #81BC3B; border-left:1px solid #81BC3B;background:#81BC3B;display:block;margin:0;color:#fff;}

html部分：

<span class="l1"></span><span class="l2"></span><span class="l3"></span><span class="l4"></span>
<span class="lcon">这里是包含在圆角框里的内容</span>
<span class="l4"></span><span class="l3"></span><span class="l2"></span><span class="l1"></span>

就是这样了。

http://kaix.in/cgi-bin/mt-tb.cgi/412. Tips:在自己blog里发表针对本文的评论文章时复制上述地址到引用通告栏，你的文章链接就会显示在本页引用列表里。