border-image-source

基线 广泛可用

此特性已相当成熟，可在许多设备和浏览器版本中使用。 它已在所有浏览器中可用，自 2017 年 2 月.

**border-image-source** CSS 属性设置用于创建元素 边框图像 的源图像。

试一试

border-image-slice 属性用于将源图像划分为区域，然后将这些区域动态应用于最终的边框图像。

语法

css
/* Keyword value */
border-image-source: none;

/* <image> values */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/* 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-style 定义的外观。

<image>

用于边框的图像引用。

正式定义

初始值none
应用于所有元素，除了当 border-collapse 为 collapse 时内部表格元素。它还应用于 ::first-letter。
继承否
计算值none 或图像及其 URI 成为绝对路径
动画类型离散

正式语法

border-image-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

基本示例

css
.box {
  border-image-source: url("image.png");
}

规范

规范
CSS 背景和边框模块级别 3
# the-border-image-source

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅