属性 | 描述 |
border-image-source | 用在边框的图片的路径。(那个图片?) |
border-image-slice | 图片边框向内偏移。(裁剪的尺寸,一定不加单位, 上右下左顺序) |
border-image-width | 图片边框的宽度(需要加单位) |
border-image-repeat | 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) 默认拉伸 |
样式设置如上表格
1 内容在中间显示
div {
width: 400px;
height: 300px;
border: 15px solid pink;
border-image-source: url(images/border.png);
/* 不要跟单位 */
border-image-slice: 30 30 30 30;
/* border-image-slice: 30; */
/* 这个属性默认的是 border的宽度 但是 有区别, 这个是 边框图片的宽度 不会挤压文字 */
border-image-width: 30px;
border-image-repeat: round;
}
<div class="out"> 第三方 <