用CSS滤镜制作圆角
今天来用 CSS滤镜来制作圆角效果。正如你所知道的，CSS滤镜只有 IE 浏览器支持，所以这种方法不能真正的用到实际当中，所以就当做是了解一下咯。
首先来看一个例子，点击这里查看（用 IE 浏览器喔）。
看了上面的例子，也许你就知道制作的原理了。我们只用《一张图片实现圆角》例子中圆圈图片的1/4（左上部分）：
，放 4 张，对相应的图片进行相应的翻转，然后定位到父容器的相应位置，就实现了圆角。
代码实现 XHTML代码：
<div id="box"> <h3>CSS滤镜制作圆角</h3> <img class="img1" src="images/yuan9.jpg" /> <img class="img2" src="images/yuan9.jpg" /> <img class="img3" src="images/yuan9.jpg" /> <img class="img4" src="images/yuan9.jpg" /> </div>
CSS代码：
*{ margin:0; padding:0; } #box{ position:relative; width:400px; margin:20px auto; border:1px solid #000; } img{ position:absolute; } .img1{ left:-1px; top:-1px; } .img2{ right:-1px; top:-1px; filter:fliph;/*水平翻转*/ } .img3{ bottom:-1px; left:-1px; filter:flipv;/*垂直翻转*/ } .img4{ right:-1px; bottom:-1px; filter:fliph flipv;/*水平垂直翻转*/ } h3{ padding:20px 0; text-align:center; }
