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.

CSS 属性 border-image-source 用于声明元素的边框图片(border-image)的资源

尝试一下

属性 border-image-slice 被用于切割资源图片的区域,然后将其动态的应用到最终的边框图片

Syntax

css
/* no border-image, use the specified border-style */
border-image-source: none;

/* the image.jpg is used as image */
border-image-source: url(image.jpg);

/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);

/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

Values

none

不会使用图片边框。会被border-style属性所设置的边框样式替换掉

<image>

用作边框的图片

Formal syntax

border-image-source = 
none |
<image>

<image> =
<url> |
<gradient>

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

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

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

Examples

请查看示例 border-image

Specifications

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-source
初始值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
Animation typediscrete

Browser compatibility

BCD tables only load in the browser