border-image-CSDN博客

简写：-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;border-width:5px;}

使用原图：效果：

add 2015/1/8: 像这种四周环绕的图，用 -webkit-border-image:url(../images/bor.png) 10 round; round时：PC端正常，移动端则会出现多张
为stretched时，三星手机是好的，小米苹果则都不会出现图片了，此处应该去掉,则PC端，移动端都正常

demo2:

css:

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

使用原图：效果：

转载于:https://www.cnblogs.com/sarahchen/p/4095336.html