border-image
简写:-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像素
使用原图: 效果: