您的位置:首页 > Web前端 > CSS

[推荐]制作div+css圆角

2016-06-20 00:00 274 查看
“尽量不要圆角,需要切图”“这样设计代码不好实现”云云,昨天在网上看到一个只用代码就可以设计出圆角的效果,~ 和大家一起分享~

首先看样式表文件:

.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}

.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;

border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}

.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;

border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}

.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;

border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

接着看页面代码:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

当然你也可以用其他的标签<div>或者<span><a>之类,应该也是可以的

在上面两句之间加上一个左右border的content

这就是效果了:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: