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浏览器的规范。
来源：https://www.cnblogs.com/lszw/p/10706904.html