<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #borderimg1 { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round; } #borderimg2 { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */ border-image: url(border.png) 30 stretch; } </style> </head> <body> <p>border-image 属性用于指定一个元素的边框图像。</p> <p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p> <p id="borderimg2">在这里，图像被拉伸以填补该地区</p> <p>这是原始图片:</p><img src="/images/border.png"> <p><b>注意:</b> Internet Explorer 10 及更早的版本不支持 border-image 属性。</p> </body> </html>
