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

最新推荐文章于 2024-05-22 17:40:30 发布

转载最新推荐文章于 2024-05-22 17:40:30 发布 · 1.3k 阅读

本文探讨了Chrome浏览器更新后导致CSS border-image属性失效的问题。作者通过排查发现，需要同时指定border-width和border-style才能正常显示。这一变化对于依赖border-image特性的前端开发者来说至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天翻墙更新了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写法如下：

[html]view plaincopy 
   
 <!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，，之后的效果如下