CSS | border-image-source 属性

简介

CSS border-image-source 属性用于为元素的边框设置一张图片作为边框样式。此属性应与 border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性一同使用，以完全控制边框样式。

语法

border-image-source: none|<image>;

属性值说明：

• none：默认值，无图片边框。
• <image>：指定图片路径和文件名作为边框样式。

示例

border-image-source: url(border.png);
border-image-slice: 20 20 20 20;
border-image-width: 20px;
border-image-outset: 10px;
border-image-repeat: stretch;

效果如下：

兼容性

• 盒子模型：border-box 可用
• 属性值：IE 11 及以下版本不支持。
• 浏览器兼容性：Can I Use

注意事项

• 如果设置了 border-image-slice、border-image-width 和 border-image-outset 属性，则 border-image-source 属性必须设置。
• 如果设置了 border-image-repeat 属性，图片必须包含重复的区域，否则无法重复。