很久之前弄的一个效果了，今天又把它找了出来。

实现这个效果,我感觉更多的是一种投机取巧的东西.当然这个是没有图片的方便.这是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">&nbsp;</strong>
  <strong class="s2">&nbsp;</strong>
  <strong class="s3">&nbsp;</strong>
  <strong class="s4">&nbsp;</strong>
  <strong class="s5">&nbsp;</strong>
</span>
<span class="bg">css圆角</span>
<span class="include">
<strong class="s5">&nbsp;</strong>
<strong class="s4">&nbsp;</strong>
<strong class="s3">&nbsp;</strong>
<strong class="s2">&nbsp;</strong>
<strong class="s1">&nbsp;</strong>
</span>
</div>

利用<strong>标签的逐渐缩小,做成圆角的效果,主要是给<strong>标签用上了font-size;margin;border;display;height;这些属性!

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=646475