当前位置：首页 > news >正文

【CSS border-image】图片边框拉伸不变形，css边框属性，用图片打造个性化边框

news 来源：原创 2025/5/24 6:32:28

当用图片做边框时，还要考虑到一个问题，如何适应边框的宽高变化，并且图片不变形？本文深入解析 CSS border-image，用图片打造个性化边框。下图的效果就是利用border-image属性实现的图片边框自适应。

本文将border-image原理、如何切图、css代码都展示出来，一文看懂！仔细看完，希望能帮到你！

一、什么是 border-image？

border-image 是 CSS3 引入的高级边框属性，允许使用图片替代传统的线条边框，实现复杂的视觉效果（如花纹边框、可缩放图标边框等）。其核心原理是将一张图片切割成9个区域（类似九宫格），分别对应元素的4个角、4条边和中心区域，再将这些区域分配到元素的边框和背景位置，从而实现灵活的边框设计。

一定要仔细看后面的案例3、案例4，看不明白回来继续看这里的切图！！！！！！

二、border-image 核心属性与原理

border-image 是一个简写属性，包含以下5个子属性（按顺序）：
css

border-image: source slice width outset repeat;

各属性含义如下：

1. border-image-source：指定边框图片的来源
值：url(图片路径) 或 linear-gradient(渐变)（CSS3支持渐变作为边框）。
示例：
css

 border-image-source: url('border.png'); /* 引用外部图片 */border-image-source: linear-gradient(45deg, red, blue); /* 渐变边框 */

2. border-image-slice：切割图片为9个区域
原理：将图片按指定数值或百分比切割成上、右、下、左四条分割线，形成九宫格（如下图）。

以这张图为例，在项目页面，确定好四个角的切割尺寸，对应上、右、下、左的顺序，数值分别是：94px、130px、61px、154px。

值：
数值：1-4个数值（单位：px 或无单位，无单位时视为「像素」），分别对应上、右、下、左四条切割线距离图片边缘的距离。
css

    border-image-slice: 30; /* 四边均切割30px */border-image-slice: 20 15 30 10; /* 上20px，右15px，下30px，左10px */

百分比：基于图片自身尺寸的百分比切割。
css

border-image-slice: 10%; /* 四边均切割10% */

注意：
切割线数值需小于图片尺寸，否则可能导致区域重叠或丢失。
若数值后加 fill，则中心区域（第5块）会被保留并作为背景显示（默认不保留）：
css

border-image-slice: 30 fill; /* 保留中心区域 */

3. border-image-width：设置边框宽度
作用：定义边框图片的显示宽度，决定切割后的区域如何缩放适应元素的边框。
值：
数值：1-4个数值（单位：px、%、em等），对应四边宽度。
css

    border-image-width: 10px; /* 四边宽度均为10px */border-image-width: 20px 15px; /* 上下20px，左右15px */

关键词：
border-box：宽度等于元素的 border-width（需先设置 border-width）。
content-box：宽度基于元素内容区域计算。
示例：
css

  border-width: 30px; /* 必须先设置border-width */border-image-width: border-box; /* 边框宽度与border-width一致 */

4. border-image-outset：设置边框外扩距离
作用：使边框图片向元素外部延伸指定距离（类似“投影”效果，但图片会超出元素边界）。
值：1-4个数值（单位：px、%等），正数表示向外延伸，负数表示向内收缩。
css

  border-image-outset: 5px; /* 四边外扩5px */

5. border-image-repeat：控制边框图片的重复方式
作用：定义4条边的图片区域如何重复或拉伸以填满边框。
值：
平铺（repeat）：图片区域重复排列（可能出现接缝）。
拉伸（stretch）：图片区域拉伸至填满边框（可能变形）。
round：智能平铺，自动缩放图片使边缘无缝衔接。
space：平铺时在图片间添加空白，避免拉伸变形。
示例：
css

  border-image-repeat: repeat; /* 四边均平铺 */border-image-repeat: stretch round; /* 上下拉伸，左右智能平铺 */

三、实战案例：从基础到进阶

案例1：基础边框图片（单一边框）

需求：用一张带边框的图片（如上图）作为元素边框，四边切割30px，宽度自适应。
（图片尺寸：72px×72px，四周24px为边框图案，中心24px×24px为透明）

HTML：
htm

<div class="box">中间</div>

CSS：
css

.box {width: 300px;height: 200px;border: 24px solid transparent; /* 必须设置border-width，颜色设为透明 */border-image: url('border.png') 30 stretch; /* 切片24px，拉伸显示 */
}

效果：

图片四边的24px区域作为边框，中心区域透明（因未加 fill）。
边框随元素尺寸自动拉伸（stretch 导致图片变形）。

案例2：平铺边框（避免拉伸变形）

需求：使用花纹图片作为边框，平铺显示避免变形。

CSS：
css

.box {border: 24px solid transparent;border-image: url('pattern-border.png') 24 repeat; /* 切片24px，平铺 */
}

效果：

边框图片以24px为单位平铺，花纹重复排列，无拉伸变形。

案例3：自定义四边样式（不同切片与重复方式）

需求：上下边框使用拉伸效果，左右边框使用平铺效果。如下图

CSS：

.box {width: 400px;/* 宽度可以改变 */height: 50px;/* 高度可以改变 */border:40px solid transparent; /* 必须设置，颜色设为透明 */border-image: url('./images/border.png') 94 130 61 154 / 94px 130px 61px 154px stretch repeat;/* 切片：上94px,右130px，下61px，左154px */
}

解析：

94 130 61 154：上切割94px，右切割130px，下切割61px，左切割154px。
/ 94px 130px 61px 154px：border-image-width 的简写，上高94px，右宽130px，下高61px，左宽154px。
stretch repeat：上下边框拉伸，左右边框平铺。

案例4：保留中心区域（作为背景）

需求：边框图片的中心区域作为背景显示（如带纹理的卡片）。

CSS：

.box {width:400px;height: 100px;border: solid transparent;border-image:url(./images/border3.png) 46 224 32 31 fill;/* 加fill保留中心区域 */border-width: 46px 224px 32px 31px;background-color: f0f0f0; /* 中心区域背景色（可选） */
}

效果：

中心区域（原图片中间部分）作为背景填充元素内部，与边框无缝衔接。