border-image 属性允许您根据一些简单的规则将图像分割为九个单独的部分，浏览器将自动使用相应的部分来替换边框的默认样式。 border-image属性是五个border-image-*属性的缩写，其语法如下：
边框图像：边框图像源 || 边框图像切片 [/边框图像宽度|/边框图像宽度？/边框图像输出] ||
从语法上我们知道，border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的缩写。
- border-image-source：定义边框图像的路径。
- border-image-slice：定义从哪里开始分割边框图像。
- border-image-width：定义边框图像的厚度（宽度）。
- border-image-outset：定义边框图像扩展大小（边框图像区域超出边框的量）。
- border-image-repeat：定义边框图像的重复方式。
下图显示了如何使用 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性。
图：边框图像[/caption]1.边框图像源
border-image-source 属性用于定义边框中使用的图像。通过该属性，您可以指定一个图像来替换默认的边框样式。如果 border-image-source 属性的值为 none 或指定的图像不可用，则显示边框的默认样式。
另外，除了 border-image-source 属性外，您还可以使用图像来替换默认的边框样式，或者使用渐变来定义边框样式。该属性的语法为：
边框图像源：无 | <图像>
None 是 border-image-source 属性的默认值，这意味着不使用图像来替换边框的默认样式。 <image> 是 url() 函数或渐变中指定的图像路径。用 Linear-gradient() 函数中定义的颜色替换默认边框样式。
[示例] 通过 border-image-source 属性使用图片替换默认边框样式。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
}
</style>
</head>
<body>
<div>デフォルトボーダーを画像で置き換える</div>
</body>
</html> 执行结果如下图所示。
图：border-image-source属性演示[/caption]结果表明，仅靠border-image-source属性并不能达到预期的效果。让我们看看其他一些函数。
2.边框图像切片
border-image-slice 属性用于分割通过 border-image-source 属性加载的图像。该属性的语法为：
边框图像切片：[ <数字> | <百分比> ]{1,4} && 填充？
border-image-slice 属性可以接受三种类型的值：
- <数字>：值。用特定值指定图像分割的位置。这些值表示图像中的像素位置或矢量坐标。不允许使用负值。
- <percentage>：图像大小的百分比。图像的宽度影响水平方向，高度影响垂直方向。
- fill：保留边框图像的中心部分。
border-image-slice 属性允许您指定将图像沿上、下、左、右四个方向划分，并将图像分为九个部分：四个角、四个边和中心区域。中心区域始终是透明的（没有图像填充，除非添加关键字填充，如下图所示）。
除了 fill 关键字之外，border-image-slice 属性还可以接受 1 到 4 个参数值：
- 如果指定了所有四个参数值，则图像将被分割为上、右、下、左。
- 如果指定三个参数，第一个参数将用于顶部，第二个参数将用于左侧和右侧，第三个参数将用于底部。
- 如果指定两个参数，则第一个参数用于顶部和底部，第二个参数用于左侧和右侧。
- 如果仅指定一个参数，则该值将用于顶部、右侧、底部和左侧的所有分割。
[示例] 使用 border-image-slice 属性分割使用 border-image-source 属性加载的图像：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
}
</style>
</head>
<body>
<div>デフォルトボーダーを画像に置き換える</div>
</body>
</html> 执行结果如下图所示。
3.边框图像宽度
border-image-width 属性用于设置通过 border-image-source 属性加载的图像的厚度（宽度）。该属性的语法为：
边框图像宽度：[ <长度> | <百分比> | <数字> | {1,4}
语法解释如下：
- <length>：以值和单位格式指定图像边框的宽度。不允许使用负值。
- <percentage>：以百分比格式指定图像框的宽度，并参考图像框区域的宽度和高度进行转换。不允许使用负值。
- <number>：使用浮点数指定图像边框的宽度。该值对应于 border-width 的倍数。例如，如果值为2，则该参数的实际值为2 * border-。宽度，不允许使用负值。
- auto：由浏览器自动设置。如果 border-image-width 设置为 auto，则实际值与 border-image-slice 相同。
提示：border-image-width 属性的默认值为 1。这意味着，如果省略 border-image-width 属性的值，则该属性的值将设置为 1 * border-width。相当于直接使用边框-width值。
border-image-width 属性还可以接受 1 到 4 个参数值：
- 如果四个参数值全部指定，则按以下顺序设置图像边框四个方向的宽度：上、右、下、左。
- 如果指定三个参数，则第一个参数用于上边框，第二个参数用于左右边框，第三个参数用于下边框。
- 如果指定两个参数，则第一个参数用于上下边框，第二个参数用于左右边框。
- 如果仅指定一个参数，则 top、right、bottom 和 left 都使用该值来设置图像边框的宽度。
[示例] 使用 border-image-width 属性设置图像边框的宽度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-width: 10px 1 0.5 15px;
}
</style>
</head>
<body>
<div>ボーダーを画像で置き換える</div>
</body>
</html> 执行结果如下图所示。
图：Border-image-width 属性演示[/caption]4.边框图像开头
border-image-outset属性用于定义图像边框偏离边框的距离（使图像边框延伸到盒模型之外）。该属性的语法为：
边框图像开头：[ <长度> | <数字> ]{1,4}
语法解释如下：
- <length>：以给定值加单位的形式指定图像边框向外偏移的距离。不允许使用负值。
- <number>：使用浮点数指定图像边框之外的偏移距离，该值表示 border-width 的倍数，例如，如果值为 2，则偏移量为 2 * 表示 border-width 为负值。是不允许的。
border-image-outset 属性还可以接受 1 到 4 个参数值：
- 如果四个参数值全部指定，则四个边按以下顺序操作：上、右、下、左。
- 如果指定三个参数值，第一个参数用于上边框，第二个参数用于左右边框，第三个参数用于下边框。
- 如果指定两个参数，则第一个参数用于上下边框，第二个参数用于左右边框。
- 如果只指定一个参数，则同时适用于所有四个边。
【示例】使用 border-image-outset 属性设置图像边框相对于边框的外偏移量。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
margin: 30px 0px 0px 30px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-outset: 25px;
background-color: #CCC;
}
</style>
</head>
<body>
<div>デフォルトのフレームを画像で置き換える</div>
</body>
</html> 执行结果如下图所示。
图：Border-image-outset 属性演示[/caption]5.边框图像重复
border-image-repeat属性用于配置如何填充由border-image-slice属性分隔开的图像的边框，例如平铺、拉伸等。该属性的语法为：
边框图像重复：[ 拉伸 | 圆形 | 空间 ]{1,2}
语法解释如下：
- 拉伸：分割后的图像将被拉伸以填充框架区域。
- 重复：将分割后的图像重复平铺以填充边框区域，当图像碰到边框时，多余的部分被剪掉；
- round：与repeat关键字类似，不同的是，如果背景图像不能重复整数次，则图像将进行相应的缩放。
- space：与repeat关键字类似，但如果背景图像不能重复整数次，则图像周围会填充空间。
border-image-repeat 属性可以接受 1-2 个参数值：
- 如果指定两个参数，则第一个参数用于水平方向，第二个参数用于垂直方向。
- 如果仅指定一个参数，则该值同时适用于水平和垂直方向。
[示例] 使用 border-image-repeat 属性设置图像边框的填充方式。
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-repeat: round repeat;
}
</style>
</head>
<body>
<div id="container">border-image-repeat</div>
</body>
</html> 执行结果如下图所示。
[标题id =“attachment_750”对齐=“aligncenter”宽度=“1024”]
图：border-image-repeat属性演示[/caption] 
现在您已经了解了 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性，让我们回顾一下 border-image 属性。 border-image属性是5个border-image-*属性的缩写，通过border-image属性可以同时设置5个border-image-*属性。
[示例] 使用 border-image 属性设置图像的边框。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image: url(./border.png) 27 round;
}
</style>
</head>
<body>
<div>デフォルトのボーダーを画像で置き換える</div>
</body>
</html> 执行结果如下图所示。
图：Border-image属性演示[/caption]
![2021 年如何设置 Raspberry Pi Web 服务器 [指南]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
