border-image-slice
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.
border-image-slice
CSS 属性将 border-image-source
指定的图像划分为多个区域。这些区域构成元素的 边框图像 的组成部分。
试试看
切片过程总共创建九个区域:四个角、四个边和一个中间区域。四条切片线从各自的边设置给定距离,控制区域的大小。
上图说明了每个区域的位置。
- 区域 1-4 是角区域。每个区域仅使用一次来形成最终边框图像的角。
- 区域 5-8 是边区域。这些区域在最终边框图像中被 重复、缩放或以其他方式修改,以匹配元素的尺寸。
- 区域 9 是中间区域。默认情况下,它被丢弃,但如果设置了关键字
fill
,则用作背景图像。
border-image-repeat
、border-image-width
和 border-image-outset
属性决定如何使用这些区域来形成最终边框图像。
语法
/* All sides */
border-image-slice: 30%;
/* top and bottom | left and right */
border-image-slice: 10% 30%;
/* top | left and right | bottom */
border-image-slice: 30 30% 45;
/* top | right | bottom | left */
border-image-slice: 7 12 14 5;
/* Using the `fill` keyword */
border-image-slice: 10% fill;
border-image-slice: fill 10%;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
border-image-slice
属性可以使用一个到四个 <number-percentage>
值来指定,表示每个图像切片的位置。负值无效;大于其对应尺寸的值将被钳制为 100%
。
- 当指定 **一个** 位置时,它将在距各自边相同距离处创建所有四个切片。
- 当指定 **两个** 位置时,第一个值将创建从 **顶部和底部** 测量的切片,第二个值将创建从 **左侧和右侧** 测量的切片。
- 当指定 **三个** 位置时,第一个值将创建从 **顶部** 测量的切片,第二个值将创建从 **左侧和右侧** 测量的切片,第三个值将创建从 **底部** 测量的切片。
- 当指定 **四个** 位置时,它们将按顺序(顺时针)从 **顶部**、**右侧**、**底部** 和 **左侧** 测量切片。
如果使用,可选的 fill
值可以放在声明中的任何位置。
Values
<number>
-
代表光栅图像的像素和矢量图像的坐标中的边偏移。对于矢量图像,数字相对于元素的大小,而不是源图像的大小,因此在这些情况下,百分比通常更可取。
<percentage>
-
表示边框偏移量占源图像大小的百分比:水平偏移量为图像宽度,垂直偏移量为图像高度。
fill
-
保留中间图像区域并将其像背景图像一样显示,但叠加在实际的
background
上方。其宽度和高度分别与顶部和左侧图像区域相匹配。
正式定义
初始值 | 100% |
---|---|
应用于 | 所有元素,除了当 border-collapse 为 collapse 时内部表格元素。它也应用于 ::first-letter 。 |
继承 | 否 |
百分比 | 指的是边框图像的大小 |
计算值 | 一个到四个百分比(根据指定)或绝对长度,以及如果指定则加上关键字 fill |
动画类型 | 按计算值类型 |
正式语法
border-image-slice =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
示例
可调边框宽度和切片
以下示例展示了一个简单的 <div>
,在其上设置了边框图像。边框的源图像如下所示
菱形宽度为 30 像素,因此将 30 像素设置为 border-width
和 border-image-slice
的值,您将获得完整的、相当清晰的菱形边框
border-width: 30px;
border-image-slice: 30;
这些是我们在此示例中使用的默认值。但是,我们还提供了两个滑块,允许您动态更改上述两个属性的值,让您了解它们的影响
border-image-slice
更改用于每个边框和边框角(以及内容区域,如果使用 fill
关键字)的图像切片大小 - 将其从 30 更改会使边框看起来有些不规则,但可能会产生一些有趣的效果。
border-width
: 更改边框宽度。采样的图像大小将按比例缩放以适合边框,这意味着如果宽度大于切片,图像可能会开始看起来有些像素化(当然,除非您使用 SVG 图像)。
HTML
<div class="wrapper">
<div></div>
</div>
<ul>
<li>
<label for="width">slide to adjust <code>border-width</code></label>
<input type="range" min="10" max="45" id="width" />
<output id="width-output">30px</output>
</li>
<li>
<label for="slice">slide to adjust <code>border-image-slice</code></label>
<input type="range" min="10" max="45" id="slice" />
<output id="slice-output">30</output>
</li>
</ul>
CSS
.wrapper {
width: 400px;
height: 300px;
}
div > div {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
border-image-slice: 30;
border-image-repeat: round;
}
li {
display: flex;
place-content: center;
}
JavaScript
const widthSlider = document.getElementById("width");
const sliceSlider = document.getElementById("slice");
const widthOutput = document.getElementById("width-output");
const sliceOutput = document.getElementById("slice-output");
const divElem = document.querySelector("div > div");
widthSlider.addEventListener("input", () => {
const newValue = `${widthSlider.value}px`;
divElem.style.borderWidth = newValue;
widthOutput.textContent = newValue;
});
sliceSlider.addEventListener("input", () => {
const newValue = sliceSlider.value;
divElem.style.borderImageSlice = newValue;
sliceOutput.textContent = newValue;
});
结果
规范
规范 |
---|
CSS 背景和边框模块级别 3 # the-border-image-slice |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 对 1 到 4 值语法进行说明
- CSS 中的边框图像:Interop 2023 的重点领域 在 MDN 博客上(2023 年)