css实现圆角效果

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

实现这个效果,我感觉更多的是一种投机取巧的东西.当然这个是没有图片的方便.这是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;这些属性!

原始的个站转移了