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 type | discrete |
Browser compatibility
BCD tables only load in the browser