关于ie兼容css3圆角与阴影与渐变的渲染

2021-06-26 15:05

阅读:598

标签:blog   width   渐变   margin   meta   实现   har   style   代码   

我们都知道,ie不兼容一些css3新属性,这就导致有些浏览效果不太好,关于ie的兼容有很多前辈给出了解决方案。这里我主要讲我用到的一个比较好用的方案,即PIE。
这里的PIE实际上指的是一个名为pie.htc的文件,通过使用css的behavior行为调用这个文件,然后使IE也能实现一些常见的css3效果,例如圆角、阴影、渐变、多图片背景的渲染等等。

下面就是一个小例子:

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>title>
    style>
        .main{
            width:300px;
            height:530px;
            background: #fff;
            border:1px solid #efefef;
            border-radius: 8px;
            box-shadow: 1px 0 15px #a89b97;
            margin:40px auto;
            padding:50px 60px 0 60px;
            behavior:url(PIE.htc);
        }
    style>
head>
body>
    div class="main">div>
body>
html>

技术分享

上图即ie8浏览器下的效果,需要注意的是behavior:url(PIE.htc);这行代码url中需要导入正确的文件地址。

关于ie兼容css3圆角与阴影与渐变的渲染

标签:blog   width   渐变   margin   meta   实现   har   style   代码   

原文地址:http://www.cnblogs.com/asituhaitang/p/7151475.html


评论


亲,登录后才可以留言!