详解css款式中的border

2021-01-20 05:13 jianzhan

border-image-source 特性设定边框的照片的相对路径[none | <image>]

div {
   border: 20px solid #000;
   border-image-source: url(border.png);
}

border-image-slice 特性照片边框向内偏位[ <number> | <percentage> ](1,4) ?fill

div {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
}

border-image-width 特性设定照片边框的宽度[ <length>|<number> |<percentage> | auto](1,4)

div {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
}

border-image-outset 特性设定边框图象地区超过边框的量[ <length>|<number> ](1,4)

div {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
   border-image-outset: 27px 27px 27px 27px;
}

border-image-repeat 特性设定图象边框是不是应平铺(repeated)、铺满(rounded)或拉伸(stretched)(1,2)

div {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
   border-image-outset: 27px 27px 27px 27px;
   border-image-repeat: rounded;
   border-image: url(border.png) 27  rounded;
}

以上便是本文的所有內容，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，另外也期待多多适用脚本制作之家！

为您推荐