border-image-source

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

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 声明,角部也仍然是尖锐的。

A blockquote with a grdient border-image-source and DevTools open next to it.

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

Blockquote with a rounded, beveled border in gray and black.

已在规范的存储库中打开了一个问题,但在撰写本文时,尚无迹象表明何时(或是否)会解决这个问题。

性能

请注意,在border-image-source 中使用图像或外部 URL 指向图像时,如果没有采取措施在使用前减小它们的大小,那么加载重量级图像会大大增加页面总大小,从而导致网站速度变慢。 在使用url() 函数调用图像之前,始终值得优化图像,并且倾向于使用现代图像格式,这些格式通常更轻。

演示

浏览器支持

所有主要浏览器的支持都很好。 也建议设置border-color,以防图像加载失败或由于服务器问题而无法加载资源。

section {
  border-color: grey; /* fallback color */
  border-width: 2rem;
  border-image-source: url("image.png");
}

更多信息