CSS border-image 属性实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>CSS border-image 属性 实例 - 自学教程(runoops.com)</title>
 <style>
 #borderimg1 {
 border: 10px solid transparent;
 padding: 15px;
 -webkit-border-image: url(//demo.runoops.com/static/img/border.png) 30 round;
 /* Safari 3.1-5 */
 -o-border-image: url(//demo.runoops.com/static/img/border.png) 30 round;
 /* Opera 11-12.1 */
 border-image: url(//demo.runoops.com/static/img/border.png) 30 round;
 }

#borderimg2 {
 border: 10px solid transparent;
 padding: 15px;
 -webkit-border-image: url(//demo.runoops.com/static/img/border.png) 30 stretch;
 /* Safari 3.1-5 */
 -o-border-image: url(//demo.runoops.com/static/img/border.png) 30 stretch;
 /* Opera 11-12.1 */
 border-image: url(//demo.runoops.com/static/img/border.png) 30 stretch;
 }
 </style>
</head>

<body>

border-image 属性用于指定一个元素的边框图像。
 在这里，图像平铺（重复），以填补该地区。
 在这里，图像被拉伸以填补该地区

这是原始图片:<img src="//demo.runoops.com/static/img/border.png">
 注意: Internet Explorer 10 及更早的版本不支持 border-image 属性。
</body>

</html>