border-image 单边设置

来源:互联网 发布:手机淘宝修改退款金额 编辑:程序博客网 时间:2024/04/30 14:50

        先上一张效果图:

        设置这样的边框,可以直接使用border-image属性,而不是将整个边框切下来作背景图。步骤如下:        

        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;