CSS - 邊框影像

CSS border-images 屬性用於透過將影像設定為任何元素周圍的邊框來建立自定義邊框。

border-image 屬性獲取影像並將其切分為九個部分（3x3）。然後，它將角放置在邊框的角上，並且邊緣會根據您的指定重複或拉伸。影像的中間部分將被忽略。

邊框影像

影像作為邊框的示例

以下程式碼顯示瞭如何將影像設定為邊框的基本示例。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url(/css/images/border.png) 40;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of setting a 
            border image using CSS
        </p>
    </div>
</body>
</html>

CSS 邊框影像源

CSS border-image-source 屬性指定要作為邊框傳遞到元素的影像的源（URL）。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of setting border image using 
            border image source.
        </p>
    </div>
</body>
</html>

CSS 邊框影像切片

border-image-slice 屬性定義如何將影像切分為區域，然後使用這些區域繪製邊框。

下圖演示瞭如何切分影像以建立邊框。影像被分成 9 個部分：四個角、四個邊和中心。

“border-image-slice”屬性中的值指定影像邊緣向內切分的距離。它本質上定義了將用於建立邊框的區域的大小。

border-image-slice 的偏移量可以以百分比或長度單位的形式提供，但強烈建議使用百分比。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/scenery2.jpg);
            border-image-slice: 25%;
            padding: 15px;
            width: 50%
        }
    </style>
</head>

<body>
    <div>
        <p>
            See how border is set for this div...
        </p>
    </div>
    <p> Here is full image for your reference: </p>    
    <img src="/css/images/scenery2.jpg" height="160px">
</body>
</html>

CSS 邊框影像寬度

border-image-width 屬性用於指定要設定為邊框的影像的寬度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            border-image-width: 5px;
            border-image-slice: 25%;
            padding: 5px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div>
        border-image-width: 5px;
    </div>

    <div style="border-image-width: 10px;">
        border-image-width: 10px;
    </div>

    <div style="border-image-width: 15px;">
        border-image-width: 15px;
    </div>
</body>
</html>

CSS 邊框影像偏移

border-image-outset 屬性用於指定元素和邊框影像之間的間隙。此屬性將邊框影像推到邊框框之外。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: grey;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            border-image-width: 10px;
            border-image-slice: 25%;
            border-image-outset: 0px;
            padding: 5px;
            width: 80%;
            margin: 10px 15px 60px;
        }
    </style>
</head>

<body>
    <div>
        border-image-outset: 0px;
    </div>

    <div style="border-image-outset: 20px;">
        border-image-outset: 20px;
    </div>

    <div style="border-image-outset: 25px;">
        border-image-outset: 25px;   
    </div>
</body>

</html>

CSS 邊框影像重複

border-image-repeat 屬性用於邊框周圍影像的重複和拉伸特性。預設情況下，邊框影像沿邊框兩側拉伸。

此屬性的 repeat 值會重複沿邊框兩側指定的影像，直到填充整個長度和寬度。

除了 stretch 和 repeat 之外，它還可以取 round 作為值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 25%;
            border-image-repeat: repeat;
            padding: 20px;
            width: 80%;
            margin: 10px 15px 60px;
        }
    </style>
</head>

<body>
    <div>
        Border Image Repeat
    </div>

    <div style="border-image-repeat: stretch;">
        Border Image Stretch
    </div>
</body>
</html>

邊框影像簡寫屬性

border-image 簡寫屬性允許您在一個宣告中設定與邊框影像相關的所有屬性。

border-image: image-source | image-slice | image-repeat;

以下示例演示瞭如何使用此屬性。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url('/css/images/border.png') 30 round;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of border shorthand property....
        </p>
    </div>
</body>
</html>

CSS 漸變作為邊框影像

CSS 漸變也可用於設定元素的邊框。支援三種類型的漸變：線性、徑向和圓錐形。