指定一個元素的邊框影象
阿新 • • 發佈：2020-07-28
<!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>