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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-source

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见