UC知道哪位CSS高手能解释下圆角的技术
来源：百度知道 编辑：UC知道 时间：2024/06/01 23:42:20
我怎么看都看不懂啊. .
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
________________________________
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
________________________________
楼上说用滤镜实现是错误的。 没有用到css的滤镜
这个问题 ，单凭文字回答，恐怕你理解不了。下面我用表格模拟出一个圆角，不是很像，但是明白这个意思就行了。
把其中一个圆角 放大来看就是这样：
<table width="200" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="76%"> </td>
<td width="24%" bgcolor="#006699"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="52%"> </td>
<td width="48%" bgcolor="#006699"> </td>
&l