- A+
所属分类：Web前端
使用css的特有属性，给不同的盒子添加边框图片。
为什么会有这一场景呢。因为，UI给我们前端的边框图片可能未必适合我们当前的内容。
这里我们主要使用到的属性有：
- border-image-source
- border-image-slice
- border-top-width
- border-image-repeat
个别属性可以根据自己的个人情况决定是否添加，希望使用的时候自己甄别。
切边框图片的顺序:
下面是我的代码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } ul li { list-style: none; } .box1 { width: 300px; height: 300px; margin: 100px; border: 5px solid #000; border-image-source: url(./1.png); /* 背景图片路径 */ border-image-slice: 10 20 20 20; /* 如何切割图片 */ border-top-width: 5px; /* 图片的宽度是多少 */ /* border-image-repeat: stretch; 默认是stretch */ /* border-image-repeat: round; */ /* round 是环绕 */ } .box2 { width: 300px; height: 300px; margin: 150px; border: 5px solid #000; border-image: url(./2.png) 40 / 10px; /* 顺序为上左下右，如果4个值一样，那么就可以省略写成一个值 ，注意，这里不要加px border-image 后面的/ 的意思是我切完图，将图放在多少个像素中的边框中去， 如果不写，就默认按照上面border中的像素去填充 */ /* 如果默认不写就是拉伸 stretch */ } .box3 { width: 300px; height: 300px; margin: 250px; /* background-color: hotpink; */ border: 5px solid #000; border-image: url(./3.png) 40 / 10px repeat; } </style> </head> <body> <!-- 大盒子 --> <div class="box1"> 我是盒子一 </div> <div class="box2"> 我是盒子二 </div> <div class="box3"> 我是盒子三（边框颜色有点浅哦） </div> </body> </html> 三张边框图片素材，我也上传上来了。仅供参考。
代码效果图如下：
