CSS - border-image-source 属性

CSS 的 **border-image-source** 属性指定将用作元素边框的图像路径。如果使用 none 值或无法显示图像，则边框样式将应用于边框。

语法

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

属性值

值	描述
none	表示不会使用任何图像作为边框。
image	表示用作边框的图像路径。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS 边框图像源属性示例

以下示例说明了使用不同值的 **border-image-source** 属性。

使用 None 值的边框图像源属性

为了不将任何图像用作元素的边框，我们使用 none 值。none 值将边框样式应用于边框。在以下示例中，使用了 none 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 20px solid;
            border-image-source: none;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-image-source property
    </h2>
    <div class="box">
        <p>
            Border-image-source 
            property with none value 
        </p>
    </div>
</body>

</html>

使用图像路径的边框图像源属性

要将图像设置为元素的边框，我们将图像路径指定给 **border-image-source** 属性。指定的图像将应用于边框。在以下示例中，使用了白色花朵图像。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 20px solid red;
            border-image-source: url(/css/images/white-flower.jpg);
            border-image-slice: 33%;
            border-image-repeat: repeat;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-image-source property
    </h2>
    <div class="box">
        <p>
            Border-image-source 
            property with image
        </p>
    </div>
    <p>
        Image used:
    </p>
    <img src="/css/images/white-flower.jpg" 
    alt="white-flower" height=150>
</body>

</html>

支持的浏览器

属性
border-image-source	15.0	11.0	15.0	6.0	15.0

css_properties_reference.htm

打印页面