先上一张效果图:
1. 切出边框图片重复的小单元,如下图:
2. 设置css样式:
border-image-source:url(../img/border_img.png);
border-image-slice:0 0 100% 0;
border-image-width:0.05rem;
border-image-repeat:repeat;
将这些属性合并起来可写为:
border-image:url(../img/border_img.png) 0 0 100%/0.05rem 0 repeat;
3. 若想此单边框在上方,可只修改
border-image-slice:100% 0 0 0;