border-image(H5C3)

最新推荐文章于 2022-04-08 14:26:14 发布

$(薛定谔的喵)

最新推荐文章于 2022-04-08 14:26:14 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

分类专栏： DOMjs

本文链接：https://blog.youkuaiyun.com/Chad97/article/details/83063902

DOMjs 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS3中的border-image属性，包括其用法、切割尺寸、边框宽度和平铺方式等特性。通过具体代码示例展示了如何使用border-image-source、border-image-slice、border-image-width和border-image-repeat等子属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

border-image

border-image是css3中的一个属性，因为兼容性问题，比较少见，但鉴于此功能在某些特定的场景中还是有些作用的；这里就简单介绍下属性和功能
我们用下面的代码来展示下它的属性和特点

效果图

在这里插入图片描述

代码块


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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;/*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:last-child{
            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>
</html>