解决新版本Chrome无法显示border-image问题

    前两天翻墙更新了Chrome,具体版本为51.0.2687.0 dev-m (64-bit)。然后今天在调试代码时发现CSS中的border-image不显示了,去最初学习的网页(CSS3 border-image详解、应用及jQuery插件)查看,发现文章中CSS3 border-image的示例也失效了,从网上搜索border-image,很多文章中的示例同样失效。咋回事呢,难道新版Chrome中将border-image功能删除了?因为笔者曾经使用并且用起来很爽的的style.pixelLeft、style.pixelTop也出现过Chrome起初支持后来删除的情况,所以笔者第一时间想到不会是border-image被W3C废弃所以被Chrome删除了吧,从网上搜索并查询W3C相关标准并未发现该特性被删除,况且此特性非常受欢迎,应该不会被随意废弃。

    经过一阵折腾,终于发现原因,之前我的CSS写法如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <title></title>
    <style>
        .div1
        {
            position:absolute;
            left:100px;
            top:100px;
            width:400px;
            height:100px;
            padding:1px;

            border:1em;
            -webkit-border-image:url(img/border-image.png) 27 27 27 27 round round;
        }
    </style>
</head>
<body>

    <div class="div1">请看我的边框</div>

</body>
</html>

效果是这样的:



将border:1em修改为border:1em solid transparent;(还有一点要注意的是border-image要放在border之后)就可以显示了,也可以改为border:1em solid;,就是不只要指定border-width还要指定border-style,,之后的效果如下


发布了30 篇原创文章 · 获赞 5 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览