CSS border-image-source 属性-之路教程

语法

border-image-source: none | image | initial | inherit;

border-image-source 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("/bg.jpg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source 属性示例</h2>
    <p class="border">Hello World!</p>
    <p>原始图片</p>
    <img src="/bg.jpg" alt="Border image" style="width:50%">
  </body>
</html>

CSS border-image-source 属性

CSS border-image-source 属性设置用于创建元素边框图像的源图像。

border-image-source 属性是 CSS3 属性之一。

如果该值设置为“none”，或者无法显示图像，则将使用边框样式。

初始值	none
应用于	所有元素，除了边框折叠为“collapse”时的内部表元素。它也适用于::first-letter。
继承	无效
可动画的	无效
版本	CSS3
DOM 语法	object.style.borderImageSource=“url（）”；

CSS border-image-source 属性值说明

值	说明
none	不会应用任何图像。
image	图像的路径作为边框应用。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

日期：2020-06-02 22:14:18 来源：oir作者：oir

←CSS border-image-slice 属性

CSS border-image-width 属性→

语法

border-image-source 属性示例：

CSS border-image-source 属性值说明

目录