首页 > 代码库 > CSS3的border-image
CSS3的border-image
border-image:none|image-url|number|percentage|stretch,repeat,round
参数:
none:默认,无背景图片
url:地址,可以为绝对,也可以相对
number:切割背景图片的边框大小一共可以有1-4个值,上,右,下,左
percentage:功能同number,只是它用的是百分比,number为数字(不用写单位,单位为px)
stretch:拉伸
round:平铺
repeat:重复边框背景
1、边框背景图切割时,处于四个角的地方不动,平铺,拉伸,重复只针对四边,不包括四角。
【原始边框背景图】
.border-img{ width: 200px; border: 20px solid; -webkit-border-image: url("picture/12.png") 95 100 85 105 stretch; border-image: url("picture/12.png") 95 100 85 105 stretch; }
<div class="border-img">border-img</div>
CSS3的border-image
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。