css border-image

最新推荐文章于 2025-12-07 12:31:50 发布

原创最新推荐文章于 2025-12-07 12:31:50 发布 · 443 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#border-image #css #border #图片边框 #css边框

css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用CSS的border-image属性来创建动态可调整的边框效果。通过分割背景图片为九宫格，并利用不同参数控制拉伸和平铺，可以轻松实现美观且响应式的边框设计。

css border-image

基本原理

将给出的图片分割为九宫格，将九宫格四个角位置的部分放置在元素四个角上，
然后将上下左右四个部分放置在元素四个边上再根据参数进行拉伸或者平铺

在这里插入图片描述

示例

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bd{
            width: 310px;
            height: 310px;
            border: 29px solid;
            margin: 300px;
            /*
            25%: 边框图片宽度为图片的25%
            stretch: 表示将四个边的边框背景图片拉伸
            */
            border-image: url("./img-border-3.png") 25% stretch;
        }
    </style>
</head>
<body>
<div class="bd">这里有一个不错的边框</div>
</body>
</html>

示例效果
在这里插入图片描述

分析
在这里插入图片描述

示例拓展

修改边框宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bd{
            width: 310px;
            height: 310px;
            border: 29px solid;
            margin: 300px;
            /*
            50%: 边框图片宽度为图片的50%
            stretch: 表示将四个边的边框背景图片拉伸
                上下宽度已经占了图片的100%，所以四个边的边框部分为空白
            */
            border-image: url("./img-border-3.png") 50% stretch;
        }
    </style>
</head>
<body>
<div class="bd">这里有一个不错的边框</div>
</body>
</html>

在这里插入图片描述

修改为平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bd{
            width: 310px;
            height: 310px;
            border: 29px solid;
            margin: 300px;
            /*
            25%: 边框图片宽度为图片的25%
            space: 表示将四个边的边框图片平铺，不足的空间平均分布为空隙
            */
            border-image: url("./img-border-3.png") 25% space;
        }
    </style>
</head>
<body>
<div class="bd">这里有一个不错的边框</div>
</body>
</html>