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>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
border-image-source 15.0 11.0 15.0 6.0 15.0
css_properties_reference.htm
廣告