实现这个效果,感觉更多的是一种投机取巧的东西.当然这个是没有图片的方便.这是css代码:
#circle{
margin:50px auto;
width:300px;
overflow:hidden;
}
.include{
background:transparent;
}
.s1,.s2,.s3,.s4,.s5{
font-size:1px;
display:block;
overflow:hidden;
background:#66ccff;
}
.s1,.s2,.s3,.s4{
height:1px;
}
.s2,.s3,.s4,.s5{
border-right:1px solid #fff;
border-left:1px solid #fff;
}
.s1{
margin:0 7px;
background:#fff;
}
.s2{
margin:0 5px;
border-width:2px;
}
.s3{
margin:0 3px;
border-width:2px;
}
.s4{
margin:0 2px;
}
.s5{
margin:0 1px;
height:2px;
}
.bg{
background:#66ccff;
border-right:1px solid #fff;
border-left:1px solid #fff;
display:block;
height:100px;
overflow:hidden;
font-weight:bold;
}
html代码
<div id="circle">
<span class="include">
<strong class="s1"> </strong>
<strong class="s2"> </strong>
<strong class="s3"> </strong>
<strong class="s4"> </strong>
<strong class="s5"> </strong>
</span>
<span class="bg">
css圆角
</span>
<span class="include">
<strong class="s5"> </strong>
<strong class="s4"> </strong>
<strong class="s3"> </strong>
<strong class="s2"> </strong>
<strong class="s1"> </strong>
</span>
</div>
利用标签的逐渐缩小,做成圆角的效果,主要是给标签用上了font-size;margin;border;display;height;这些属性!
