CSS3：border-image

2024-04-24 13:20

文章标签 frontend css3 image border

本文主要是介绍CSS3：border-image，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

<!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>