为什么borderimage在CSS中很少被使用，你可能不知道的小知识

之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。

看起来这是一个非常漂亮的CSS功能，它可以让你用图片修饰元素的边框。下面是一个实例演示，你可以拖拽调整里面的方块的大小，看看有什么边框图案的变化。

HTML代码

CSS代码

body {
font-family: Arial, sans-serif;
text-align: center;
}
.bi {
border: 45px solid transparent;
-webkit-border-image: url(https://www.xyhtml5.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
-moz-border-image: url(https://www.xyhtml5.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
border-image: url(https://www.xyhtml5.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
font-family: Arial, Helvetica, sans-serif;
color: #222;
width: 500px;
margin: 30px auto 30px auto;
overflow: hidden;
resize: both;
}

演示

但不幸的是，这么好的一个功能，却没有看到多少人使用它，也许是我的眼界太窄。如果你在哪看到过有人使用border-image属性，或你在真正项目中使用了它，请留言告诉我。