border-image-source

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( <string> <url-modifier>* )  |
  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