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

最新推荐文章于 2021-12-21 17:47:12 发布

xlb_123

最新推荐文章于 2021-12-21 17:47:12 发布

阅读量746

点赞数

分类专栏： web前端开发 css相关文章标签： css 兼容圆角

web前端开发同时被 2 个专栏收录

153 篇文章 1 订阅

订阅专栏

css相关

33 篇文章 0 订阅

订阅专栏

转载来自：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文件

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

xlb_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css兼容性ie5/6/7/8的圆角

转载来自：http://www.jb51.net/css/78107.htmlborder-radius 圆角.radius{border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius:
复制链接

扫一扫