使用复合属性border-image
设置css样式:
border-image-source:url(../img/border_img.png);
border-image-slice:0 0 100% 0;
border-image-width:0.05rem;
border-image-outset
border-image-repeat:repeat;
将这些属性合并起来可写为:
border-image:url(../img/border_img.png) 0 0 100%/0.05rem 0 repeat;
单边边框图片
若想此单边框在上方,可只修改
border-image-slice:100% 0 0 0;
在ios中使用
border:solid 1px transparent;
border-image:url(…) 30 30 round;
但是发现在ios中即使像上面一样设置了border也是无效的,原因是我们要将复合属性border拆开来写,例如:
border-width:1px;
border-style:solid;
border-image:url(…) 30 30 round;
这样就好用了
使用效果图
注意
1、使用border-image的同时一定要使用border,例如:
border:solid 1px transparent;
border-image:url(…) 30 30 round;
2、border-image-slice百分比单位是相对于边框图片大小,图片宽度影响水平偏移,图片高度影响垂直偏移