<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>原始图片</p>
<img src="./images/border1.png" alt="">
<p>一、</p>
<p>border: 27px solid transparent;</p>
<p>border-image-source: url(./images/border1.png);</p>
<div class="border-image1"></div>
<p>二、</p>
<p>border: 27px solid transparent;</p>
<p>border-image-source: url(./images/border1.png);</p>
<p>border-image-slice: 27 27 27 27;</p>
<p>border-image-repeat: stretch;（图像边界默认拉伸）</p>
<div class="border-image2"></div>
<p>三、</p>
<p>border: 27px solid transparent;</p>
<p>border-image-source: url(./images/border1.png);</p>
<p>border-image-slice: 27;</p>
<p>border-image-repeat: repeat;（图像边界重复）</p>
<div class="border-image3"></div>
<p>四、</p>
<p>border: 27px solid transparent;</p>
<p>border-image-source: url(./images/border1.png);</p>
<p>border-image-slice: 27;</p>
<p>border-image-repeat: round;（图像边界铺满）</p>
<div class="border-image4"></div>
<p>五、</p>
<p>border: 10px solid transparent;</p>
<p>border-image: url(./images/border1.png) 27 round;</p>
<div class="border-image5"></div>
<p>原始图片</p>
<img src="./images/border2.png" alt="">
<p>六、</p>
<div>border: 64px solid transparent;</div>
<div> border-image-source: url(./images/border2.png);</div>
<div>border-image-slice: 64;</div>
<div class="border-image6"></div>
<p>七、相比于background-image，优势在于等比缩放时可以保证四个角的宽度不变</p>
<div>border: 64px solid transparent;</div>
<div> border-image-source: url(./images/border2.png);</div>
<div>border-image-slice: 64 fill;（fill保留图像的中间部分）</div>
<div class="border-image7"></div>
<p>八、</p>
<div>background-image: url(./images/border2.png);</div>
<div>background-size: 100% 100%;</div>
<div class="border-image8"></div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.border-image1 {
width: 300px;
height: 150px;
border: 27px solid transparent;
border-image-source: url(./images/border1.png);
}
.border-image2 {
width: 300px;
height: 150px;
border: 27px solid transparent;
border-image-source: url(./images/border1.png);
border-image-slice: 27 27 27 27;
}
.border-image3 {
width: 300px;
height: 150px;
border: 27px solid transparent;
border-image-source: url(./images/border1.png);
border-image-slice: 27;
border-image-repeat: repeat;
}
.border-image4 {
width: 300px;
height: 150px;
border: 27px solid transparent;
border-image-source: url(./images/border1.png);
border-image-slice: 27;
border-image-repeat: round;
}
.border-image5 {
width: 300px;
height: 150px;
border: 10px solid transparent;
border-image: url(./images/border1.png) 27 round;
}
.border-image6 {
width: 468px;
height: 232px;
border: 64px solid transparent;
border-image-source: url(./images/border2.png);
border-image-slice: 64;
}
.border-image7 {
width: 468px;
height: 232px;
border: 64px solid transparent;
border-image-source: url(./images/border2.png);
border-image-slice: 64 fill;
}
.border-image8 {
width: 468px;
height: 232px;
background-image: url(./images/border2.png);
background-size: 100% 100%;
}
</style>
