border-image使用

使用复合属性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百分比单位是相对于边框图片大小,图片宽度影响水平偏移,图片高度影响垂直偏移

 

猜你喜欢

转载自www.cnblogs.com/kunmomo/p/12622686.html