IE 不支持 CSS3 的 border 样式

目前知道的 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>

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值