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-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
参见
border
outline
box-shadow
background-image
<url>
类型- MDN 博客:CSS 中的边框图像:Interop 2023 的重点关注领域(2023)