CSS - background-clip 属性

CSS background-clip 属性用于指定如何在元素的内边距框、边框框或内容框内显示背景图像或颜色。它决定了将应用背景的元素区域。

语法

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

属性值

值	描述
border-box	背景延伸到边框后面。默认值。
padding-box	背景延伸到边框的内边缘。
content-box	背景延伸到内容框的边缘。
initial	这将属性设置为其初始值。
inherit	这从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS background-clip 属性示例

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

背景延伸到边框后面

要使背景延伸到边框后面，我们使用 border-box 值。这在下面的示例中显示。

示例

Open Compiler

<!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 值。这在下面的示例中显示。

示例

Open Compiler

<!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 值。这在下面的示例中显示。

示例

Open Compiler

<!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

打印页面