正文

border-radius,box-shadow兼容性解决办法

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

css3 border-radius不支持IE8/IE7的四种解决方法

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

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

第一种方法：ie-css3.htc

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

第一步：下载.htc文件：下载

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

box {

  -moz-border-radius: 15px; /* Firefox */

  -webkit-border-radius: 15px; /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */

  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */

}

第二种方法：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 属性值等于这个纹理对象就可以了。

原文地址：http://www.manongjc.com/article/1214.html

相关阅读

目录[+]