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

当用图片做边框时，还要考虑到一个问题，如何适应边框的宽高变化，并且图片不变形？本文深入解析 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; /* 中心区域背景色（可选） */
}

效果：

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

四、注意事项与最佳实践

必须先设置 border-width：

border-image 依赖 border-width 确定边框尺寸，否则无法显示。

浏览器兼容性：

现代浏览器（Chrome/Firefox/Safari）均支持，IE11+ 部分支持（需加 -ms前缀）。

性能优化：

优先使用 SVG 图片（矢量图）作为边框，避免拉伸模糊。

复杂边框可拆解为多个简单图层，减少 border-image 的计算量。

与其他属性配合：

box-sizing: border-box：确保边框图片不影响元素尺寸计算。

background-clip: padding-box：调整背景显示范围，避免与边框冲突。

五、常见问题解答

Q：边框图片不显示怎么办？

A：检查是否设置了 border-width，且 border-color 不为 transparent（除非需要透明边框）。

Q：图片拉伸变形严重如何处理？

A：使用 repeat 或 round 替代 stretch，或切分更小的重复单元图片。

Q：如何让边框图片覆盖背景？

A：通过 z-index 或 position 调整元素层级，或使用 background-clip 控制背景显示区域。

六、总结：border-image 的应用场景

自定义按钮边框：如带图标或花纹的可缩放按钮。
卡片设计：为卡片添加带纹理的边框和背景。
分割线/装饰线：用图片实现复杂样式的分隔线。
响应式设计：通过九宫格切片实现边框图片随元素尺寸自适应。

小伙伴们，看到这里，你读懂了吗？动手实践一下，给我点个赞吧！

通过灵活组合 border-image 的各属性，能轻松打破传统边框的限制，为设计注入更多创意！