前兩天翻牆更新了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，，之後的效果如下
