边框图片的基础使用

如题：

<style>
        .box{
            width: 400px;
            height: 150px;
            border: 20px solid #ccc;
            margin-bottom: 30px;
        }

        .box:first-child{
            /*border-image: url("images/border01.jpg") 167/20px round;*/
            /*1.在内容变化的容器可以使用，边框自动填充*/
            /*2.用法：*/
            /*2.1 图片资源*/
            border-image-source: url("images/border01.jpg");
            /*2.2 切割的尺寸 默认的单位px 而且不能使用小数*/
            /*而且这个切割顺序是上，右，下，左*/
            /*2.2.1 切割的位置距离对应的边的距离  切了四刀   4个切割的尺寸*/
            /*我们在这里不难发现，我们即使切割的部位宽度不是一样的，但是会强行将切割后的图片撑开*/
            border-image-slice: 167 100 50 10;/*167 167 167 167*/
            /*2.3 边框的宽度*/
            border-image-width: 20px;
            /*2.4 平铺的方式  三种平铺方式 round stretch repeat*/
            /*round 环绕 完整的自适应（等比缩放）平铺在边框内*/
            /*stretch 拉伸 拉伸显示在边框内容 变形的*/
            /*repeat 平铺 从边框的中间向两侧平铺 自适应平铺但是不是完整的*/
            border-image-repeat: round;

        }

        .box:nth-child(2){
            border-image: url("images/border01.jpg") 167/20px stretch;
        }

        .box:nth-child(3){
            border-image: url("images/border01.jpg") 167/20px repeat;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

　　做出来的效果：

　　

 

 这里我只是改变了第一种方式每次切的距离，导致边框图片的不规则，如果设置合适的数值就会变成正常了

posted @ 2020-10-29 16:57  coderLsq  阅读(74)  评论(0)    收藏  举报