CSS 边框图像
border-image
border-image 可以将图像应用到盒子的边框上。
border-image 属性需要3个值同时存在：
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。- 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浏览器的规范。
更多精彩
