首页 > 代码库 > border-image

border-image

2024-08-01 22:42:01   219人阅读

简写：-webkit-border-image:url(border.png) 30 30 round;

值描述测试
border-image-source用在边框的图片的路径。 
border-image-slice图片边框向内偏移。 
border-image-width图片边框的宽度。 
border-image-outset边框图像区域超出边框的量。 
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

demo1:

html:

<div class="sa_add"><p><span>黄亮</span><span>12345678</span></p><h4>湖北省荆州市江陵县XXX村六组13号</h4></div>

css:

1 .sa_add{padding:10px;margin:0 5px;-webkit-border-image:url(../images/bor.png) 10 round;border-width:5px;}

 使用原图：      效果：

demo2:

css:

1 width: 100px;height: 38px;-webkit-border-image: url(../1.png) 20/18px   //此图片的剪裁宽度为20像素,div的边框宽度为18像素

使用原图：     效果：

border-image


联系
我们