一真的小站

鳶飛魚躍,無處不是化境。

0%

十八、边框图片

十八、边框图片

1
2
3
4
5
6
7
8
9
10
11
12
div{
width: 300px;
height: 300px;
margin: 100px auto;
border: 27px solid red;
/*添加边框图片*/
/*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
border-image-source:ur1("../images/border1.png");
/*让它成为九宫格:border-image-slice:设置四个方向上的裁切距离.fi11:做内容的?
S内部填朴/
border-image-slice:27 fill;
}
1
2
3
4
5
6
7
8
9
10
11
12
/*border-image-width:边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
细节:1.边框图片的本质是背景,并不会影响元素内容的放置2.内容只会被容器的border和padding影响
建议:一般将值设置为原始的边框的宽度*/
border-image-width:27px;
/*border-image-outset:扩展边框*/
border-image-outset:epx;
/*border-image-repeat:I repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺*/
border-image-repeat:round;
/*缩写:*/
/*border-image:source slice/width/outset repeat;*/
border-image: url("../images/border1. png")27 /27px /epx round;