IE 不支持 CSS3 的 border 样式

最新推荐文章于 2020-03-17 17:42:28 发布

游鹏老

最新推荐文章于 2020-03-17 17:42:28 发布

阅读量2.7k

点赞数

分类专栏： CSS 文章标签： html ie css3

本文链接：https://blog.csdn.net/tzp1025029729/article/details/52441766

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目前知道的 IE 不适配 CSS3 的 border-radius、box-shadow、text-shadow 属性，这时需要引入 PIE.htc 文件。

引入的 PIE.htc 文件是相对于 HTML 文件而不是相对于 CSS 文件的。因此需要在每一个 HTML 文件的抬头引入 PIE.htc。

之后只需在不适配属性前加上 behavior: url(PIE.htc); 即可。

举例：

<!DOCTYPEhtml>
<html>
<head>
    <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
    <title>css3按钮圆边</title>
    <style>
        .font-label {
            font-weight: bold;
        }
        .input-text {
            border: 1px solid #C3CED9;
            behavior :url(PIE.htc);
            border-radius: 50px ;/**左上角-右上角-左下角-右下角*/
        }
        .btn-login {
            cursor: pointer;
            display: inline-block;
            position: relative;
            behavior :url(PIE.htc);
            border-radius: 20px;
            font-weight: lighter;
            width:88px;
            padding-top: 0px 2px;
            margin-bottom:  0px 2px;
            -moz-border-radius: 50px;/**兼容火狐浏览器*/
            -webkit-border-radius: 50px;/**兼容苹果；谷歌，等一些浏览器认*/
            -o-border-radius: 50px;/**兼容opera浏览器*/
            background-color:#03F; 
            margin:0 0 0 10px;
            /***背景色渐变**/
            background:-webkit-linear-gradient(top,#03F,#9dccdc);
            background: -moz-linear-gradient(top,#03F,#9dccdc);
            background:-o-linear-gradient(top,#03F,#9dccdc);
            background:linear-gradient(top,#03F,#9dccdc);
        }
    </style>
</head>
<body>
    <div align="center">
        <span class="font-label">用户名:</span>
        <input type="text" placeholder="请输入用户名" class="input-text"/>
        <br/>
        <span class="font-label">密 码:</span>
        <input type="text" placeholder="请输入密码" class="input-text"/>
        <br/>
        <input type="reset" class="btn-login" value="重置"/
        <input type="button" class="btn-login"value="登录"/>
    </div>
</body>
</html>