CSS - border-image 屬性

CSS border-image 屬性允許您使用圖片作為元素的邊框。它是一個簡寫屬性，用於定義 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 屬性的值。

語法

border-image: source slice width outset repeat | initial | inherit;

屬性值

值	描述
border-image-source	指定用作邊框的圖片路徑。
border-image-slice	指定如何切片圖片。
border-image-width	指定指定圖片的寬度。
border-image-outset	指定邊框圖片超出邊框框的延伸量。
border-image-repeat	指定圖片是否要圓角、拉伸或重複。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 邊框圖片屬性示例

以下示例使用不同的值解釋了 border-image 屬性。

定義邊框圖片屬性的所有值

border-image 屬性是用於將值設定為圖片的源、切片、寬度、外邊距和重複的簡寫屬性。在以下示例中，這些屬性的值已在一個宣告中宣告。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size {
                height: 200px;
                width: 300px;
                margin: 20px;
                border: 20px solid transparent;
        }

        .border-image-example1 {
                border-image: url(/css/images/white-flower.jpg)
                50 round;
        }

        .border-image-example2 {
                border-image: url(/css/images/white-flower.jpg)
                10 20 30 40 round;
        }
    </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>

        <div class="border-image-example1 size">
                This border has been set using border-image
                with same slice value 50 for all sides.
        </div>


        <div class="border-image-example2 size">
                This border has been set using border-image
                with separate slice values 10 20 30 40 
                for all sides.
        </div>

        <p>
                Image used:
        </p>
        <img src="/css/images/white-flower.jpg" 
        alt="flower" height=150>

</body>

</html>

邊框圖片屬性的組成屬性

border-image 屬性組合了 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat。以下示例演示了這些屬性如何協同工作以建立邊框圖片效果。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size {
                height: 150px;
                width: 200px;
                margin:60px;
                border: 30px solid transparent;
        }

        .border-image-example1 {
                border-image-source: 
                url(/css/images/white-flower.jpg);
                border-image-slice: 70;
                border-image-width: 15px;
                border-image-outset: 25px;
                border-image-repeat: repeat;
        }

        .border-image-example2 {
                border-image-source: 
                url(/css/images/white-flower.jpg);
                border-image-slice: 20 40 60 80;
                border-image-width: 17px;
                border-image-outset: 15px;
                border-image-repeat: stretch;
        }
    </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>
        <div class="outer-box">
        <div class="border-image-example1 size">
                This border has been set using consitutent 
                properties of border-image with 70 slice, 
                25px width, 35px outset and repeat repeat.
        </div>
        </div>
        <div class="outer-box">
        <div class="border-image-example2 size">
                This border has been set using consitutent 
                properties of border-image with 20,40,60,80
                slice, 17px width,15px outset and 
                repeat stretch.
        </div>
        </div>
        <p>
                Image used:
        </p>
        <img src="/css/images/white-flower.jpg" 
        alt="flower" height=150>

</body>

</html>

帶有漸變的邊框圖片屬性

CSS 漸變也可以用於設定元素的邊框。支援三種類型的漸變：線性、徑向和錐形。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
                height: 200px;
                width: 200px;
                margin: 20px;
                border-style: solid;
                border-width: 10px;
        }

        img.linear-gradient {
                border-image: 
                linear-gradient(45deg, rgb(15, 64, 161),
                rgb(228, 6, 17)) 1;
        }

        img.radial-gradient {
                border-image: radial-gradient(rgb(58, 61, 60),
                rgb(47, 227, 221)) 1;
        }

        img.conic-gradient {
                border-image: 
                conic-gradient(red, yellow, green, aqua, blue) 
                1;
        }
   </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>
        <div>
        <p>
                a) Linear Gradient
        </p>
        <img class="linear-gradient" 
        src="/css/images/white-flower.jpg" 
        alt="linear-gradient" />
        </div>
        <div>
        <p>
                b) Radial Gradient
        </p>
        <img class="radial-gradient" 
        src="/css/images/white-flower.jpg" 
        alt="radial-gradient" />
        </div>
        <div>
        <p>
                b) Conic Gradient
        </p>
        <img class="conic-gradient" 
        src="/css/images/white-flower.jpg" 
        alt="conic-gradient" />
        </div>
</body>

</html>

支援的瀏覽器

屬性
border-image	16.0	11.0	15.0	6.0	15.0

css_properties_reference.htm

列印頁面