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

dimlau

这里是演示内容
KAIX.IN

具体代码如下

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>

就是这样了。

旧评论存档

詹理荣 2007-03-14,11:40 says::
谢谢你。到今天我才真正看懂了CSS设置圆角的代码,也就是说明白其道理,它的思路。真的很谢谢你,如果有什么帮忙。271103854 OICQ 就叫我蟑螂

dimlau 2007-03-14,12:28 says::
很高兴文章对你有所帮助

eren 2008-08-11,00:10 says::
谢谢了!

ivan 2008-08-14,22:02 says::
谢谢,很有用,继续努力呀:)

关于作者:定格咖啡馆主理人,著有《开家长长久久的咖啡馆》《咖啡入门书》等。

延伸阅读

本站架设在 RamNode VPS

使用 Grav CMS 发布管理