为了实现丰富多彩的边框效果，在CSS3中，新增了border-image属性，这个新属性允许指定一副图像作为元素的边框。
以上图片盒子大小不一，但是边框样式相同，此时就需要边框图片来完成制作。
边框图片切图原理
把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。
怎么切：切的时候要保证四个角，每个角的完整性
例如：
边框图片语法
| 属性 | 描述 |
| border-image-source | 用在边框的图片路径。（哪个图片？） |
| border-image-slice | 图片边框向内偏移。（裁剪的尺寸，一定不加单位，上右下左顺序） |
| border-image-width | 图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度） |
| border-image-repeat | 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸 |
代码演示
<style>
div {
width: 400px;
height: 300px;
border: 15px solid pink;
/* 边框图片路径 */
border-image-source: url(images/border.jpg);
/* 第一种写法上右下左值不同的时候 */
/* border-image-slice: 170 10 45 80; */
/* 第二种写法上右下左值都相同的时候 */
border-image-slice: 170;
/* 图片边框的宽度（需要加单位） */
border-image-width: 30px;
/* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
border-image-repeat: round;
}
</style>
<body>
<div></div>
</body>注意：
（1）当div中输入文字，如果没加入border-image-width: 30px;这个属性的时候，展现的是下面这个效果，边框图片的宽度等于盒子的边框宽度border: 15px；
（2）当div中输入文字，加入border-image-width: 30px;这个属性的时候，展现的是下面这个效果，边框图片的宽度等于border-image-width: 30px;边框图片的宽度不会挤压文字，所以能看到文字的显示与上面的图片不相同
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6266.html
