border-image

最新推荐文章于 2025-06-06 23:18:57 发布

原创最新推荐文章于 2025-06-06 23:18:57 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

12 篇文章

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 30px solid red;
            border-image: url(img/borderBG.png) 80 100 80 round;
        }

        /*
        border-image 属性是一个简写属性，用于设置以下属性：
        border-image-source:url()
        border-image-slice:图片边框向内偏移。
        border-image-width:图片边框的宽度。
        border-image-outset:边框图像区域超出边框的量。
        border-image-repeat:图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
        */
    </style>
</head>
<body>
<div>
    自定义边框
</div>