理解JavaScript中的边框图片-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44703582/article/details/124178965

本文介绍了JavaScript中如何使用边框图片实现复杂边框样式。通过`border-image`属性，结合`border-image-source`、`border-image-slice`、`border-image-width`和`border-image-repeat`设置，可以创建出灵活的边框效果。文章提供了一个案例，展示了一个400x300像素的div元素，应用了边框图片，调整了裁剪尺寸、边框宽度和平铺方式，最后以圆形环绕的方式呈现。

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

当我们有很多的大小不一但是盒子的边框样式相同的盒子的时候，我们就能用到边框图片来完成盒子边框。

原理：

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。

边框图片的语法

border-image-source：用在边框的图片的路径
border-image-slice：图片边框向内偏移（裁剪的尺寸，一定不加单位，上右下左顺序）
border-image-width：图片边框的宽度（需要加单位），不会挤压文字（不是边框的宽度是边框图片的宽度）
border-image-repeat：图象边框是否平铺(repeat)、铺满(round)或拉伸(stretch)（默认拉伸）

组合写法：
border-image: url("images/border.jpg") 167/20px round;

拆分写法：
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解释：

- 边框图片资源地址
- 裁剪尺寸（上右下左）单位默认px，可使用百分百。
- 边框图片的宽度，默认边框的宽度。
- 平铺方式：
- stretch 拉伸（默认）
- repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
- round 环绕，是完整的使用切割后的图片进行平铺。

案例：

首先我们准备一个图片

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

width: 400px;

height: 300px;

border: 15px solid pink;

border-image-source: url(../ECharts/charts/images/border1.png);

border-image-slice: 30 30 30 30;

border-image-width: 30px;

border-image-repeat: round;

}

</style>

</head>

<body>

<div></div>

</body>

</html>