border-image
border-image 可以将图像应用到盒子的边框上。
border-image 属性需要3个值同时存在：
- URL 图片的地址
- 切割图片的位，4个边需要写4个值
- 如何处理边，它又3个种方式
- stretch 伸展图片
- repeat 重复图片
- round 重复图片，同时会处理好边框效果
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>盒子边框图像</
title
>
<
style
>
div{
width:200px;
height:50px;
border: 2px outset green;
margin:20px;
}
div.one{
-moz-border-image: url("dots.gif") 11 11 11 11 stretch;
-webkit-border-image: url("dots.gif") 11 11 11 11 stretch;
border-image: url("dots.gif") 11 11 11 11 stretch;
}
div.two {
-moz-border-image: url("GeS7.gif") 11 11 11 11 round;
-webkit-border-image: url("GeS7.gif") 11 11 11 11 round;
border-image: url("GeS7.gif") 11 11 11 11 round;
}
</
style
>
</
head
>
<
body
>
<
h1
>利永贞网</
h1
>
<
h2
>学编程，上利永贞网</
h2
>
<
div
class
=
"one"
></
div
>
<
div
class
=
"two"
></
div
>
</
body
>
</
html
>
|
示例中演示两个盒子，计算结果如下：
注：
-moz-border-image 属性 和 -webkit-border-image 属性不在CSS规范内，它们是FireFox浏览器和Chrome浏览器的规范。