`

border-radius IE8兼容处理

    博客分类:
  • CSS
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属性值等于这个纹理对象就可以了。

 

 

 

 

 

 

 

 

.

 

分享到:
评论

相关推荐

    border-radius兼容ie78

    在描述中提到的“css3的border-radius 为了兼容ie8浏览器所用到的插件以及实例”,指的是使用CSS3 Pie插件来使IE7和IE8支持`border-radius`。要使用CSS3 Pie,你需要在HTML文档中引入Pie.js文件,并在需要应用`...

    border-radius IE8兼容处理的方法

    总的来说,要让`border-radius` 在IE8上工作,开发者需要结合使用`behavior`属性和PIE.htc文件,同时注意其他兼容性问题,如媒体查询的缺失。通过这样的方法,我们可以创建在现代浏览器和旧版IE之间具有良好兼容性的...

    引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

    然而,这个特性在早期的Internet Explorer浏览器,如IE7和IE8,并不被支持。为了解决这个问题,开发者们发明了一种名为PIE ( Positioned Inline Element ) 的技术,它通过一个名为`.htc`(HTML Component)的文件来...

    border-radius.htc

    然而,对于旧版的IE(尤其是IE8及更早版本),它们并不支持这个属性,因此开发者需要寻找替代方案,这就是"border-radius.htc"发挥作用的地方。 "border-radius.htc"文件的工作原理是,当在CSS中为一个元素应用这个...

    让IE6也识别CSS3-圆角效果应用border-radius

    4. **CSS3 PIE (Progressive Internet Explorer)**:这是一个流行的开源项目,通过添加特定的CSS类和行为,使得IE6-IE8能够识别并渲染CSS3的一些特性,包括`border-radius`。引入PIE.js和PIE.css文件后,只需在需要...

    border-radius失效

    8. **浏览器兼容性**:并非所有浏览器都支持`border-radius`。虽然现代浏览器已经广泛支持,但较老的版本如IE9及以下可能需要使用渐进增强或条件注释来确保兼容性。 9. **透明边框**:如果边框颜色设置为`...

    IE实现CSS3中的border-radius(圆角)

    让IE实现CSS3中的border-radius(圆角)

    圆角魅力:CSS border-radius全攻略

    border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } ``` #### 五、兼容性和浏览器支持 目前,`border-radius`属性在大多数现代浏览器中都有很好的支持,包括但不限于Chrome、Firefox、Safari、...

    浅析border-radius如何兼容IE

    随着浏览器的更新迭代,现在大多数现代浏览器已经原生支持`border-radius`,因此在新项目中,你可以优先考虑使用原生CSS3特性,只针对老版本IE做兼容处理。 总的来说,`border-radius`在IE浏览器的兼容性问题可以...

    css3教程应用css3 圆角border-radius属性制作...

    对于IE8及更早版本,可能需要使用额外的JavaScript库如jQuery的`.css()`方法或CSS3 PIE来实现兼容。 通过灵活运用`border-radius`,我们可以创建各种圆角效果,从简单的矩形圆角到复杂的自定义形状,提升网页设计的...

    CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

    然而,对于不支持这些前缀的浏览器(如IE和360浏览器),即使保留这些属性,也不会产生任何负面影响,因为它们遵循CSS3的标准属性`border-radius`。 `border-radius`属性可以接受一个到四个值,分别代表左上角、右...

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先,`border-radius`属性是CSS3引入的新特性,允许我们为元素的边框创建圆角,而非传统的直角。然而,IE8及...

    CSS3 border-radius圆角的实现方法及用法详解

    目前,主流浏览器如IE9、Opera 10.5、Safari 5、Chrome 4以及Firefox 4都支持border-radius属性。对于那些不支持border-radius属性的旧版本浏览器,比如早期版本的Safari和Chrome,可以使用-webkit-border-radius...

    div的圆角的制作,兼容FF, IE等浏览器

    如Bootstrap、 Normalize.css 或者 Modernizr等CSS框架和库,可以帮助开发者解决跨浏览器兼容性问题,它们通常已经内置了对`border-radius`的兼容性处理。 5. 响应式设计与媒体查询 当涉及到不同屏幕尺寸时,可能...

    实现CSS3中的border-radius(边框圆角)示例代码

    ` 是一种针对IE8及更早版本的hack,它依赖于VML和HTC行为,现在已经很少使用,因为现代浏览器已经原生支持`border-radius`。 3. 示例代码解析: 以下代码创建了三个具有不同圆角效果的盒子: `.box1` 设置了11...

    IE系列不支持CSS的圆角border-radius等属性的解决方案

    这就意味着,对于较为现代的IE版本,可以直接使用标准的CSS3代码而不需要额外的兼容性处理。对于仍需要支持IE8及以下版本的场景,开发者可以通过条件注释或feature detection来为老版本IE提供替代样式或脚本,从而...

    兼容所有浏览器的CSS3圆角

    尽管`border-radius`在现代浏览器中被广泛支持,但为了确保向后兼容,我们需要针对老版本的浏览器,如Internet Explorer(尤其是IE8及以下版本)进行特殊处理。这些浏览器不支持CSS3,因此我们需要使用JavaScript库...

    css3圆角兼容火狐、IE和webkit

    对于IE,兼容性处理稍微复杂一些,因为IE8及更早版本不支持border-radius。但IE9及以上版本开始支持此特性,不过需要使用其私有属性`-ms-border-radius`。同时,对于IE8及以下版本,可以使用VML(Vector Markup ...

    兼容各种浏览器的圆角边框

    对于IE9,它开始支持CSS3的border-radius,所以只需要保留标准语法即可。 ```css /* IE8 及以下 */ element { filter: progid:DXImageTransform.Microsoft.RoundCorners(width, radius); } /* IE9 */ element { ...

Global site tag (gtag.js) - Google Analytics