background-clip 背景绘制区域

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS background-clip 属性演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .example {
            padding: 15px;
            margin-bottom: 20px;
            background-color: #ff9a9e;
            background-image: linear-gradient(to right, #ff9a9e, #fad0c4);
            font-weight: bold;
            color: #333;
        }
        
        .example-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
        }
        
        .example-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        
        /* 默认值 - 背景延伸到边框 */
        .example1 {
            background-clip: border-box;
            border: 10px dotted rgba(0,0,0,0.3);
            padding: 20px;
        }
        
        /* 背景只延伸到内边距 */
        .example2 {
            background-clip: padding-box;
            border: 10px dotted rgba(0,0,0,0.3);
            padding: 20px;
        }
        
        /* 背景只在内容区显示 */
        .example3 {
            background-clip: content-box;
            border: 10px dotted rgba(0,0,0,0.3);
            padding: 20px;
        }
        
        /* 文字填充背景效果 */
        .example4 {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, red, blue);
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 20px;
            border: none;
        }
    </style>
</head>
<body>
    <h1>CSS background-clip 属性演示</h1>
    
    <div class="container">
        <div class="example example1">
            <div class="example-title">background-clip: border-box (默认值)</div>
            <div class="example-desc">背景延伸到边框外边缘（在边框下层绘制）</div>
            <div>这个示例中，背景延伸到了边框区域，可以看到边框下方的渐变背景。</div>
        </div>
        
        <div class="example example2">
            <div class="example-title">background-clip: padding-box</div>
            <div class="example-desc">背景延伸到内边距外边缘，边框下不绘制背景</div>
            <div>这个示例中，背景只延伸到内边距区域，边框下方没有背景。</div>
        </div>
        
        <div class="example example3">
            <div class="example-title">background-clip: content-box</div>
            <div class="example-desc">背景仅在内容区域绘制，内边距区域不绘制</div>
            <div>这个示例中，背景只在内容区域显示，内边距区域没有背景。</div>
        </div>
        
        <div class="example example4">
            <div class="example-title">background-clip: text</div>
            <div class="example-desc">背景被裁剪为文字的前景色（文字填充效果）</div>
            <div>渐变文字效果</div>
        </div>
    </div>
</body>
</html>