<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
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"
>
</
body
>
</
html
>