css兼容性ie5/6/7/8的圆角

来源：互联网发布：可以套现的淘宝店铺编辑：程序博客网时间：2024/06/05 18:58

转载来自：http://www.jb51.net/css/78107.html

border-radius 圆角

(1)第一种可以用.htc来解决

.radius{
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */
}

说明：不支持单边的圆角属性，比如： border-top-left-radius，但是你可以这样来写：

border-radius 圆角

圆形：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .radius{             width: 100px;            height: 100px;            border: 1px solid #696;            text-align: center;            -webkit-border-radius: 50%;            -moz-border-radius: 50%;            border-radius:135px;            background: #EEFF99;            behavior: url(PIE.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */        }    </style></head><body><div class="radius"></div></body></html>

效果：

(2)第二种，可以用一个空心的圆来覆盖在图片上面，这种兼容性好一些，因为不用使用.htc文件，而且这个文件的位置还必须要跟对应的html文件

放在同一个目录下面，如果多个页面都需要设置的话，会很麻烦。。

0 0