border-radius IE8兼容处理

青春..荒唐

浏览: 973146 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

css3 border-radius用于设置HTML元素的圆角效果，但只有IE9、chorme及firefox浏览器支持该属性，IE8及以下浏览器不兼容也不支持border-radius属性，本文章向大家介绍如何解决IE8兼容border-radius属性的方法，需要的朋友可以参考一下。

border-radius是css3的属性，因此比较早的浏览器是不会支持该属性的，如何才能实现border-radius兼容老版本的浏览器呢？

【第一种方法：PIE.HTC或者ie-css3.htc】

【拓展下，.htc可以使ie支持许多css3属性，具体在后面文章里做了总结】

我们可以使用网上提供的一个插件来解决这个问题。

第一步：下载PIE.HTC文件：下载链接http://css3pie.com/download/

第二步：使用behavior通知浏览器调用脚本，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>圆角兼容</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #header {
            width: 400px;
            height: 400px;
            margin: 10px;
            border: 1px solid red;
            /* Firefox */
            -moz-border-radius: 15px; 
            /* Safari 和 Chrome 
            -webkit-border-radius: 15px; 
            /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
            border-radius: 15px; 
            /*关键属性设置 需要把路径设置好，通知IE浏览器调用脚本作用于'box'类*/
            behavior: url(PIE.htc);
        }
    </style>
</head>
<body>
<div id="header">
</div>
</body>
</html>

IE8浏览器下效果：

第二种方法：DD_roundies实现圆角

DD_roundies下载地址：

DD_roundies.js：http://pan.baidu.com/s/1o68wluE

DD_roundies.min.js：http://pan.baidu.com/s/1jGqTwI6

<!DOCTYPE HTML>
<html>
<head>
<title>http://www.manongjc.com/article/1214.html</title>
<script src="DD_roundies.js"></script>
</head>
<body>
<div class="test" style="background-image:url(2.jpg);width:88px;height:106px;">
</div>
<img src="2.jpg" alt="" class="test"/>
<script type="text/javascript">
        DD_roundies.addRule('.test', '10px 10px', true);
</script>
</body>
</html>

第三种方法：SVG实现图片圆角效果

本处的实现原理适用于各种SVG规则的或不规则的图形。

SVG实现图片圆角关键是借助元素<pattern>.

举个例子，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则SVG代码如下：

<svg width="100" height="100">
    <desc>SVG圆角效果</desc>
    <defs>
        <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="test.jpg" x="0" y="0" width="625" height="605" />
        </pattern>
    </defs>
    <circle cx="50" cy="50" r="50" fill="url(#raduisImage)"></circle>
</svg>

图形元素都有一个fill属性，让其值url锚向<pattern>的id就可以了

第四种方法：Canvas实现图片圆角效果

本规则适用于各种Canvas绘制的规则或不规则图形。

Canvas实现图片圆角的关键是使用“纹理填充”。

Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。

举个例子，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则主要JS代码如下：

// canvas元素, 图片元素
var canvas = document.querySelector("#canvas"), image = new Image();
var context = canvas.getContext("2d");
image.onload = function() {
    // 创建图片纹理 http://www.manongjc.com/article/1214.html
    var pattern = context.createPattern(image, "no-repeat");
    // 绘制一个圆
    context.arc(50, 50, 50, 0, 2 * Math.PI);
    // 填充绘制的圆
    context.fillStyle = pattern;
    context.fill();    
};
image.src = "test.jpg";

让Canvas上下文的fillStyle属性值等于这个纹理对象就可以了。

分享到：

.htc使ie支持的css3属性 | IE浏览器支持CSS3属性（圆角、阴影、渐变）

2018-01-13 19:36
浏览 891
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论