您好,登录后才能下订单哦!
这篇文章给大家分享的是有关css 不规则边框的设置方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
css不规则边框的设置方法:首先创建一个HTML示例文件;然后通过“border-image: url(border.png) 30 stretch;”属性设置不规则边框即可。css如何设置不规则边框?
在CSS中,可以通过border-image属性来设置不规则边框。border-image属性可以使用图像来设置边框的样式。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #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; } </style> </head> <body> <p>border-image 属性用于指定一个元素的边框图像。</p> <p id="borderimg1">在这里,图像平铺(重复),以填补该地区。</p> <p id="borderimg2">在这里,图像被拉伸以填补该地区</p> <p>这是原始图片:</p><img src="/images/border.png"> </body> </html>
效果图:
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)。
感谢各位的阅读!关于“css 不规则边框的设置方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。