css边框不连续,css不规则边框怎么设置
css不规则边框的设置⽅法：⾸先创建⼀个HTML⽰例⽂件；然后通过“border-image: url(border.png) 30 stretch;”属性设置不规则边框即可。
本⽂操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。
css如何设置不规则边框？
在CSS中，可以通过border-image属性来设置不规则边框。border-image属性可以使⽤图像来设置边框的样式。
⽰例：
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-
webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
border-image 属性⽤于指定⼀个元素的边框图像。
在这⾥，图像平铺(重复)，以填补该地区。css怎么创建
在这⾥，图像被拉伸以填补该地区
这是原始图⽚:
效果图：
border-image属性
语法border-image: source slice width outset repeat|initial|inherit;
属性值：
border-image-source ⽤于指定要⽤于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset ⽤于指定在边框外部绘制 border-image-area 的量
border-image-repeat ⽤于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。