使用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>
三張邊框圖片素材，我也上傳上來了。僅供參考。
代碼效果圖如下：
