border-image-source

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-source CSS 属性设置用以创建元素边框图像的源图像。

尝试一下

border-image-slice 属性用于将源图像分割为多个区域,然后动态地应用到最终的边框图像。

语法

css
/* 关键字值 */
border-image-source: none;

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

/* 全局值 */
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
适用元素all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
是否是继承属性
计算值none or the image with its URI made absolute
动画类型离散值

形式语法

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");
}

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-source

浏览器兼容性

BCD tables only load in the browser

参见