CSS - background-clip 屬性

CSS background-clip 屬性用於指定如何在元素的內邊距框、邊框框或內容框內顯示背景影像或顏色。它決定了將應用背景的元素區域。

語法

background-clip: border-box | padding-box | content-box | initial | inherit;

屬性值

值	描述
border-box	背景延伸到邊框後面。預設值。
padding-box	背景延伸到邊框的內邊緣。
content-box	背景延伸到內容框的邊緣。
initial	這將屬性設定為其初始值。
inherit	這從父元素繼承屬性。

CSS background-clip 屬性示例

以下示例說明了使用不同值的 background-clip 屬性。

背景延伸到邊框後面

要使背景延伸到邊框後面，我們使用 border-box 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
        }

        .border-area {
            background-clip: border-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="border-area">Background applied to the entire element.</p>

</body>

</html>

背景延伸到邊框內部

要使背景延伸到邊框內，我們使用 padding-box 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
        }

        .padding-area {
            background-clip: padding-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="padding-area">
        Background applied to the content & padding area.
    </p>
</body>

</html>

背景延伸到內容框內部

要使背景延伸到內容框的邊緣，我們使用 content-box 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
        }

        .content-area {
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="content-area">
        Background applied only to the content area.
    </p>

</body>

</html>

支援的瀏覽器

屬性
background-clip	4.0	9.0	4.0	3.0	10.5

css_properties_reference.htm

列印頁面