CSS3 背景 - radial-gradient() 函数

核心知识点

radial-gradient() 函数的基本语法和作用
不同类型的取值方式（形状、大小、位置、颜色停止点）
与 background 属性的配合使用
浏览器兼容性和最佳实践

学习目标

掌握 radial-gradient() 函数的完整语法
能够使用不同的形状和大小值创建径向渐变
理解颜色停止点的设置方法和作用
学会创建各种复杂的径向渐变效果
了解径向渐变的常见应用场景和解决方案

什么是 radial-gradient() 函数？

radial-gradient() 函数用于创建径向渐变背景，它可以生成从一个中心点向外辐射的颜色过渡效果。

语法

radial-gradient([形状] [大小] at [位置], [颜色停止点1], [颜色停止点2], ...);

取值方式

1. 形状

关键字	描述
`circle`	圆形渐变
`ellipse`	椭圆形渐变（默认值）

2. 大小

关键字	描述
`closest-side`	渐变边缘与最近的元素边接触
`closest-corner`	渐变边缘与最近的元素角接触
`farthest-side`	渐变边缘与最远的元素边接触
`farthest-corner`	渐变边缘与最远的元素角接触（默认值）

3. 位置

取值方式	描述	示例
关键字	使用预定义的位置关键字	`center`
百分比值	使用百分比指定位置	`50% 50%`
长度值	使用长度值指定位置	`10px 20px`

位置关键字

关键字	描述
`center`	中心位置（默认值）
`top`	顶部中心
`bottom`	底部中心
`left`	左侧中心
`right`	右侧中心
`top left`	左上角
`top right`	右上角
`bottom left`	左下角
`bottom right`	右下角

4. 颜色停止点

颜色停止点由颜色值和可选的位置组成：

color [位置];

颜色值：可以是任何有效的 CSS 颜色值（十六进制、RGB、RGBA、HSL、HSLA）
位置：可选，可以是百分比或长度值，默认为均匀分布

代码示例

示例 1：基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>radial-gradient() 基本用法示例</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .gradient1 {
            /* 默认值，椭圆形，从中心开始 */
            background: radial-gradient(red, yellow, green);
        }
        
        .gradient2 {
            /* 圆形渐变 */
            background: radial-gradient(circle, red, yellow, green);
        }
        
        .gradient3 {
            /* 指定大小和位置 */
            background: radial-gradient(circle closest-side at top left, red, yellow, green);
        }
        
        .gradient4 {
            /* 椭圆形，指定大小和位置 */
            background: radial-gradient(ellipse farthest-corner at 60% 40%, red, yellow, green);
        }
    </style>
</head>
<body>
    <h1>radial-gradient() 基本用法示例</h1>
    
    <div class="box gradient1">
        <h2>默认值，椭圆形，从中心开始</h2>
        <p>background: radial-gradient(red, yellow, green);</p>
    </div>
    
    <div class="box gradient2">
        <h2>圆形渐变</h2>
        <p>background: radial-gradient(circle, red, yellow, green);</p>
    </div>
    
    <div class="box gradient3">
        <h2>指定大小和位置</h2>
        <p>background: radial-gradient(circle closest-side at top left, red, yellow, green);</p>
    </div>
    
    <div class="box gradient4">
        <h2>椭圆形，指定大小和位置</h2>
        <p>background: radial-gradient(ellipse farthest-corner at 60% 40%, red, yellow, green);</p>
    </div>
</body>
</html>

示例 2：多颜色停止点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>radial-gradient() 多颜色停止点示例</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .gradient1 {
            /* 三颜色渐变，均匀分布 */
            background: radial-gradient(red, yellow, green);
        }
        
        .gradient2 {
            /* 三颜色渐变，指定位置 */
            background: radial-gradient(red 0%, yellow 50%, green 100%);
        }
        
        .gradient3 {
            /* 四颜色渐变，自定义位置 */
            background: radial-gradient(red 0%, orange 25%, yellow 50%, green 100%);
        }
        
        .gradient4 {
            /* 颜色停止点重叠，创建硬边界 */
            background: radial-gradient(red 0%, red 30%, blue 30%, blue 100%);
        }
    </style>
</head>
<body>
    <h1>radial-gradient() 多颜色停止点示例</h1>
    
    <div class="box gradient1">
        <h2>三颜色渐变，均匀分布</h2>
        <p>background: radial-gradient(red, yellow, green);</p>
    </div>
    
    <div class="box gradient2">
        <h2>三颜色渐变，指定位置</h2>
        <p>background: radial-gradient(red 0%, yellow 50%, green 100%);</p>
    </div>
    
    <div class="box gradient3">
        <h2>四颜色渐变，自定义位置</h2>
        <p>background: radial-gradient(red 0%, orange 25%, yellow 50%, green 100%);</p>
    </div>
    
    <div class="box gradient4">
        <h2>颜色停止点重叠，创建硬边界</h2>
        <p>background: radial-gradient(red 0%, red 30%, blue 30%, blue 100%);</p>
    </div>
</body>
</html>

示例 3：透明度渐变

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>radial-gradient() 透明度渐变示例</title>
    <style>
        .container {
            position: relative;
            width: 400px;
            height: 300px;
            border: 2px solid #333;
            margin: 20px;
        }
        
        .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* 从中心向外透明的径向渐变 */
            background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>radial-gradient() 透明度渐变示例</h1>
    
    <div class="container">
        <img src="https://via.placeholder.com/400x300" alt="示例图片" class="image">
        <div class="overlay">
            <div>
                <h2>图片标题</h2>
                <p>这是一个带有径向渐变叠加层的图片</p>
            </div>
        </div>
    </div>
</body>
</html>

常见应用场景

1. 按钮发光效果

.button {
    padding: 12px 24px;
    background: radial-gradient(circle, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.button:hover {
    background: radial-gradient(circle, #45a049 0%, #3d8b40 100%);
}

2. 卡片背景

.card {
    padding: 40px;
    background: radial-gradient(circle at top left, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

3. spotlight 效果

.spotlight {
    position: relative;
    width: 500px;
    height: 300px;
    background: #f0f0f0;
}

.spotlight::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
}

4. 图标背景

.icon {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

浏览器兼容性

浏览器	支持情况
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
IE 10+	✅

最佳实践

使用 circle 创建圆形效果：需要圆形渐变时使用 circle 关键字
使用 ellipse 创建椭圆形效果：需要椭圆形渐变时使用 ellipse 关键字
指定大小和位置：根据需要使用 closest-side、farthest-corner 等关键字调整渐变大小
使用透明度：结合 rgba() 或 hsla() 创建半透明渐变效果
注意性能：复杂的径向渐变可能会影响性能，尤其是在移动设备上
使用渐变生成工具：对于复杂的径向渐变，可以使用在线工具生成代码

练习

创建一个从中心向外的彩虹径向渐变效果
实现一个带有透明度的 spotlight 效果
设计一个使用径向渐变的按钮，包含悬停效果
创建一个带有径向渐变背景的卡片设计
尝试使用不同的形状和大小值创建各种径向渐变效果

小结

radial-gradient() 函数是创建径向渐变背景的强大工具，通过灵活使用不同的形状、大小、位置和颜色停止点，你可以实现各种复杂的径向渐变效果。结合其他 CSS 属性，你可以创建出更加丰富的视觉效果。

记住，在实际应用中，径向渐变效果应该与整体设计风格相协调，避免过度使用导致视觉疲劳。