DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 $200 免费信用额度!
CSS border-image-outset
属性设置元素的 border-image
区域与它超出元素的 border-box
的距离。
.container {
border-style: ridge;
border-width: 3rem;
border-image-source: url('path/to/image.jpg');
border-image-slice: 70;
border-image-width: 40%;
border-image-repeat: repeat;
border-image-outset: 2;
}
border-image-outset
属性在 CSS 背景和边框模块级别 3 规范 中定义。它被称为“边缘悬垂”属性,它完美地描述了它的设计目的:允许边框图像区域悬垂在元素的边框框上。

语法
border-image-outset: [<length [0,∞]> | <number [0,∞]>]{1,4}
- 初始值:
0
- 应用于:所有元素(包括
::first-letter
伪元素),除了当border-collapse
设置为collapse
时内部表格元素。 - 继承:否
- 百分比:n/a
- 计算值:四个值,每个值是一个数字或绝对长度
- 动画类型:按计算值
border-image-outset
接受一到四个值,类似于margin
和padding
简写属性
- 一个值:将所有四边的外边距距离设置为相同。
- 两个值:第一个值设置顶部和底部的外边距;第二个值设置左侧和右侧的外边距。
- 三个值:第一个值设置顶部的外边距;第二个值设置右侧和左侧的外边距;第三个值设置底部的外边距。
- 四个值:从顶部开始,按顺时针顺序设置每边的外边距(依次为顶部、右侧、底部和左侧)。
值
/* Length value (includes unit) */
border-image-outset: 2rem;
/* Number value (unitless) */
border-image-outset: 2;
/* Single value: Sets all four sides */
border-image-outset: 2;
border-image-outset: 2rem;
border-image-outset: 32px;
/* Two values: top and bottom | left and right */
border-image-outset: 4 6rem;
border-image-outset: 2 3rem;
border-image-outset: 1 24px;
/* Three values: top | left and right | bottom */
border-image-outset: 4rem 2 5rem;
border-image-outset: 5 8rem 10rem;
border-image-outset: 3 6 9;
/* Four values: top | right | bottom | left */
border-image-outset: 15 4rem 4 10rem;
border-image-outset: 2 5 13rem 4;
border-image-outset: 2 5 3 7rem;
/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;
<length
[0,∞]>
长度是一个带有任何 CSS 单位的数字——例如10px
、1.35rem
、50%
、25dvh
等——用于设置图像外边距的高度和宽度尺寸。
.container{
/* Sets dimensions on all four sides */
border-image-outset: 2rem;
}
上面的示例为border-image-outset
的top
、right
、bottom
和left
外边距指定了一个2rem
单位长度。因此,每边的长度都是2rem
。
<number [0,∞]>
数字与<length>
值完全相同,只是没有 CSS 单位。当我们为属性值设置无单位的数字时,该数字相对于border-width
值。使用值等于border-image-outset
值乘以border-width
值。
border-image-outset = <number> * border-width
假设我们有以下样式规则
.container {
border-image-outset: 4;
border-width: 1rem;
}
我们将border-image-outset
无单位的<number>
值(4
)乘以border-width
值(1rem
),得到一个边框图像偏移总计4rem
。
border-image-outset = 4 * 1rem = 4rem
border-image-outset
vs. border-image-width
它们当然不一样,尽管在某些方面它们的行为类似,例如在值方面。例如,这两个属性都接受<length>
和<number>
值,以及一个声明中的最多四个值。
但是,这两个属性之间的区别体现在每个属性对边框图像的一部分的独特影响方式。border-image-width
影响边框图像区域的物理尺寸。border-image-outset
影响边框图像与内容框之间的距离,允许边框图像延伸到边框框之外。
一些需要记住的事情
关于border-image-outset
属性,还有其他一些值得了解的事项
- 必须将元素的
box-sizing
设置为border-box
,即* { box-sizing: border-box; }
。这可以防止边框和填充增加元素的物理宽度,以及元素看起来比实际更大。 - 不允许使用负值。
- 渲染在边框框之外的
border-image
不会触发滚动。超出部分对鼠标事件不可见,也不会捕获事件。 - 即使它们永远不会引起滚动机制,外边距图像仍然可能被祖先元素或视窗剪裁。
演示
更改下面的border-image-outset
、border-image-width
和border-width
值,以查看每个输入如何影响图像大小。
浏览器支持
更多信息
- CSS 背景和边框模块级别 3(W3C 规范)
- 了解
border-image
(CSS-Tricks) - 如何使用纯 CSS 添加边框图像和渐变边框(DigitalOcean)
相关
边框
.element { border: 3px solid #f8a100; }
边框图像宽度
.element { border-image-width: 4rem; }
边框图像重复
.element { border-image-repeat: repeat; }
边框图像切片
.element { border-image-slice: 30%; }
border-image-source
.element { border-image-source: url('path/to/image.webp'); }
box-sizing
.element { box-sizing: border-box; }