很久之前弄的一个效果了,今天又把它找了出来。
实现这个效果,我感觉更多的是一种投机取巧的东西.当然这个是没有图片的方便.这是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>
利用<strong>标签的逐渐缩小,做成圆角的效果,主要是给<strong>标签用上了font-size;margin;border;display;height;这些属性!
原始的个站转移了