边框图片的原理:一 一对应。
将背景图片分为了9块。
边框图片总大小为81px * 81px正方形,每块是27px * 27px正方形。如上图:
.i {
width: 280px;
height: 160px;
border: 27px solid red;
}
背景图片覆盖背景颜色
border-image-source: url("...");
指定边框图片的路径,默认图片只会填充到容器的四个角。
-
border-image-slice: 27 fill;
设置四个方向上的裁切距离。fill:做内容的内部填充。除非使用了关键词 fill,否则中间的图像部分会被丢弃。 -
border-image-width: 27px;
边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。一般值设置为原始边框的宽度。
边框图片的本质是个背景,内容位置不受边框图片的影响。
-
border-image-outset: 0px;
扩展边框。不常用(因为即使有box-sizing: border-box,也会将容器变大,影响布局。) -
border-image-repeat: repeat;
repeat:设置2、4、5、7区域直接重复平铺。round:将内容缩放进行完整的重复平铺。若不设置此属性,则2、4、5、7区域被拉伸。
repeat:
round:
缩写:
border-image: source slice / width / outset repeat;
border-image: url("...") 27 / 27px / 0px round;
学习黑马程序员的笔记