您的位置:首页 > Web前端 > CSS

CSS3的border-image

2016-11-05 11:59 246 查看
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>


  

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: