DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 免费信用额度 200 美元!
border-image-source
CSS 属性使用图像文件或 CSS 渐变作为源在元素周围创建边框。
.container {
border-width: 2rem;
border-style: dotted;
border-color: grey;
border-image-source: url('path/to/image.jpg');
border-image-repeat: repeat;
border-image-slice: 100;
}
请注意,在此示例中,border-image-source
是三个 border-image-*
属性之一
border-image-source
:指定用于边框的图像文件或渐变。border-image-repeat
:指定在绘制边框时是否重复图像或仅显示一次。border-image-slice
:将边框图像分割成用于间距和调整图像大小的区域。
border-image-source
属性在 CSS 背景和边框模块级别 3 规范 中定义。
语法
border-image-source = none | <image>;
where
<image> = <url> | <gradient>
…其中 <image>
可以表示为指向图像文件的 URL,或 CSS 渐变。
- 初始值:
none
- 应用于:所有元素,除了在
border-collapse
为 collapse 时内部表格元素 - 继承:否
- 计算值:
none
或计算的<image>
- 百分比:N/A
- 动画类型:离散
值
/* Keyword values */
border-image-source: none;
border-image-source: <image>;
/* <image> values */
border-image-source: url('image.png');
border-image-source: url('svg-file.svg');
border-image-source: <gradient>;
/* <gradient> values */
border-image-source: linear-gradient(to bottom left, lightblue, #00000);
border-image-source: repeating-linear-gradient(15deg, #900000, #ee2400, #ffb09c 2rem );
border-image-source: radial-gradient(to top right, #7AD7F0, #92DFF3 0.5rem, #F5FCFF);
border-image-source: repeating-radial-gradient(to right, #B7E9F7, #DBF3FA);
border-image-source: conic-gradient(#FFFEE9, #FFFBC8, #FFF59E, #FFF157);
/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;
none
这是 border-image-source
CSS 属性的默认值。 它表示在选定元素上不会设置任何图像或渐变颜色。
<gradient>
语法允许您设置一组颜色并使它们重叠。 它表示 5 个渐变函数,它们是
linear-gradient()
radial-gradient()
conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
<image>
作为 url()
<image>
接受 url()
函数及其有效输入,包括具有有效扩展名的图像、svg 或指向图像的外部链接。 它基本上与 background-image
接受 url()
函数并显示其目标图像文件的方式相同。 下面的示例从 url()
函数中提供的 JPG 图像文件中创建边框
.container {
border-image-source: url("path/to/image.jpg");
border-image-repeat: repeat;
border-image-slice: 150 75;
/* etc */
}
<image>
作为 <gradient>
<image>
值也可以表示为 CSS <gradient>
。 渐变只是浏览器绘制的图像,这就是为什么它们被认为是有效的 <image>
值。 并且支持任何类型的 CSS 渐变
linear-gradient()
radial-gradient()
conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
我们设置它的方式与使用 background-image
属性设置的方式相同
.container{
border-image-source: repeating-linear-gradient(
15deg,
#900000,
#ee2400,
#ffb09c 2rem
);
border-image-repeat: repeat;
border-image-slice: 100 75;
/* etc */
}
哦,你想动画化渐变? 当然可以! 它确实需要使用自定义 CSS @property
- 截至本文撰写之时,这仅在 Chrome 中受支持 - 但完全有可能,比如,旋转渐变的角度
了解有关在 “插值数字 CSS 变量” 中使用 @property
的更多信息。
边框图像可以是 SVG
除了具有有效图像扩展名的图像之外,svg
文件也可以用作边框。 像往常一样在 url()
函数中链接 SVG 文件
.container {
border-width: 3rem;
border-style: solid;
border-image-source: url("path/to/image.svg");
/* etc. */
}
如果这是您喜欢的滚动方式,编码后的 SVG 也适用
如果你想用 SVG 作为边框图像来做一些非常棘手的操作,可以阅读 Preethi 的文章“使用渐变、CSS 形状甚至表情符号创建创意背景图案”。 其中示例使用的是background-image
属性,但它们也适用于border-image-source
。
边框半径不可行
简而言之,border-image-source
属性无法与border-radius
属性一起使用。 可以在同一个元素上设置border-radius
,但边框图像的角部将保持其尖锐边缘。
如果真的需要圆角,可以考虑在元素的::before
伪元素上使用background-image
,并在其上应用border-radius
。
以下更详细的解释。 在我的研究中,以下示例使用border-image-source
属性创建repeating-linear-gradient
边框,并将border-radius
设置为50%
。 注意,即使 DevTools 显示border-radius
声明,角部也仍然是尖锐的。

下面是不用border-image-source
的效果

已在规范的存储库中打开了一个问题,但在撰写本文时,尚无迹象表明何时(或是否)会解决这个问题。
性能
请注意,在border-image-source
中使用图像或外部 URL 指向图像时,如果没有采取措施在使用前减小它们的大小,那么加载重量级图像会大大增加页面总大小,从而导致网站速度变慢。 在使用url()
函数调用图像之前,始终值得优化图像,并且倾向于使用现代图像格式,这些格式通常更轻。
演示
浏览器支持
所有主要浏览器的支持都很好。 也建议设置border-color
,以防图像加载失败或由于服务器问题而无法加载资源。
section {
border-color: grey; /* fallback color */
border-width: 2rem;
border-image-source: url("image.png");
}
更多信息
- CSS 背景和边框模块级别 3(W3C 规范)
border-image-source
(MDN)- 如何使用纯 CSS 添加边框图像和渐变边框(DigitalOcean)
相关技巧!
相关
边框
.element { border: 3px solid #f8a100; }
border-block
.element { border-block: 5px solid #f8a100; }
border-collapse
.element { border-collapse: separate; }
border-boundary
.element { border-boundary: display; }
border-image
.element { border-image: url(border.png) 25 25 round; }
border-inline
.element { border-inline: 5px solid #f8a100; }
border-radius
.element { border-radius: 10px; }
border-spacing
.element { border-spacing: 5px; }