用CSS滤镜制作圆角
日期：2008-12-16 分类：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>
<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;
}
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;
}
和《一张图片实现圆角》一样，如果父容器的高度为基数，圆角在 IE6 里下方也会出现一条横线。
