HTML | DOM 样式 borderImageSource 属性

简介

borderImageSource 属性定义边框图片的路径。它与 border-image 属性一起使用，可以创建具有自定义边框的元素。

语法

borderImageSource: url | none | initial | inherit;

• url：边框图片的路径。它可以是相对路径或绝对路径。
• none：没有边框图片，使用默认的边框样式。
• initial：使用默认值。
• inherit：继承父元素的属性值。

示例

代码

<style>
  .custom-border {
    border: 10px solid transparent;
    border-image-source: url('border.png');
    border-image-slice: 30;
    border-image-width: 10px;
  }
</style>

<div class="custom-border">
  这是一个自定义边框的元素。
</div>

效果

属性值说明

url

url 属性值可以是相对路径或绝对路径，指向要用作边框的图片。图片可以是支持PNG，GIF和JPEG格式的任何格式。

border-image-source: url('border.png');

none

none 属性值表示没有边框图片，使用默认的边框样式。

border-image-source: none;

initial

initial 属性值表示使用默认值。

border-image-source: initial;

inherit

inherit 属性值表示从父元素继承属性值。

border-image-source: inherit;

兼容性

该属性在所有主流的现代浏览器中都得到了支持，包括 Chrome、Firefox、Safari 和 Edge。

总结

borderImageSource 属性是用于定义边框图片路径的样式属性。与 border-image 属性结合使用，可以创建具有自定义边框的元素。此外，你还可以使用 border-image-slice、border-image-width 和 border-image-repeat 属性进一步控制边框图片的样式。