CSS3 径向渐变 (Radial Gradients)

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 径向渐变示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .gradient-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .gradient-box {
            width: 250px;
            height: 250px;
            border-radius: 10px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .gradient-box:hover {
            transform: scale(1.03);
        }
        
        /* 默认径向渐变 */
        .radial1 {
            background: radial-gradient(#ff9a9e, #fad0c4);
        }
        
        /* 圆形渐变 */
        .radial2 {
            background: radial-gradient(circle, #a1c4fd, #c2e9fb);
        }
        
        /* 指定位置的渐变 */
        .radial3 {
            background: radial-gradient(at top left, #ffecd2, #fcb69f);
        }
        
        /* 指定大小 */
        .radial4 {
            background: radial-gradient(closest-side at 30% 60%, #84fab0, #8fd3f4);
        }
        
        /* 椭圆大小 */
        .radial5 {
            background: radial-gradient(ellipse 100% 50% at center, #a6c1ee, #fbc2eb);
        }
        
        /* 多色渐变 */
        .radial6 {
            background: radial-gradient(circle, 
                #ff0000, 
                #ff7f00 25%, 
                #ffff00 50%, 
                #00ff00 75%, 
                #0000ff);
        }
        
        /* 重复径向渐变 */
        .radial7 {
            background: repeating-radial-gradient(
                circle,
                #5b7fff,
                #5b7fff 10px,
                #33ccff 10px,
                #33ccff 20px
            );
        }
        
        /* 复杂径向渐变 */
        .radial8 {
            background: radial-gradient(
                circle farthest-corner at 20% 30%,
                rgba(255,255,255,0.8) 0%,
                rgba(255,255,255,0.5) 30%,
                rgba(0,0,0,0) 60%
            ), 
            radial-gradient(
                ellipse at 70% 50%,
                rgba(255,255,255,0.8) 0%,
                rgba(255,255,255,0.5) 30%,
                rgba(0,0,0,0) 80%
            ), 
            #3a7bd5;
        }
        
        .label {
            margin-top: 10px;
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1 style="width: 100%; text-align: center;">CSS3 径向渐变示例</h1>
    
    <div class="gradient-container">
        <div class="gradient-box radial1"></div>
        <span class="label">默认径向渐变</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial2"></div>
        <span class="label">圆形渐变</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial3"></div>
        <span class="label">左上角开始的渐变</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial4"></div>
        <span class="label">指定位置和大小</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial5"></div>
        <span class="label">椭圆大小渐变</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial6"></div>
        <span class="label">多色径向渐变</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial7"></div>
        <span class="label">重复径向渐变</span>
    </div>
    
    <div class="gradient-container">
        <div class="gradient-box radial8"></div>
        <span class="label">复杂组合渐变</span>
    </div>
    
    <script>
        // 为每个渐变盒子添加CSS代码显示
        document.querySelectorAll('.gradient-box').forEach(box => {
            const style = window.getComputedStyle(box);
            const bg = style.backgroundImage;
            box.textContent = bg.replace(/url\(.*\)|;/g, '').trim();
        });
    </script>
</body>
</html>