CSS3 背景 - repeating-radial-gradient() 函数

核心知识点

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

学习目标

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

什么是 repeating-radial-gradient() 函数？

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

语法

repeating-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）
位置：可选，可以是百分比或长度值，默认为均匀分布

工作原理

repeating-radial-gradient() 函数的工作原理与 radial-gradient() 类似，但它会在指定的颜色停止点范围内重复渐变模式。当最后一个颜色停止点的位置小于 100% 时，渐变会从该点开始重复，直到填满整个元素。

代码示例

示例 1：基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>repeating-radial-gradient() 基本用法示例</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .gradient1 {
            /* 默认值，椭圆形，从中心开始 */
            background: repeating-radial-gradient(red, yellow 20%, green 40%);
        }
        
        .gradient2 {
            /* 圆形重复渐变 */
            background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
        }
        
        .gradient3 {
            /* 指定大小和位置 */
            background: repeating-radial-gradient(circle closest-side at top left, red, yellow 10%, green 20%);
        }
        
        .gradient4 {
            /* 椭圆形，指定大小和位置 */
            background: repeating-radial-gradient(ellipse farthest-corner at 60% 40%, red, yellow 10%, green 20%);
        }
    </style>
</head>
<body>
    <h1>repeating-radial-gradient() 基本用法示例</h1>
    
    <div class="box gradient1">
        <h2>默认值，椭圆形，从中心开始</h2>
        <p>background: repeating-radial-gradient(red, yellow 20%, green 40%);</p>
    </div>
    
    <div class="box gradient2">
        <h2>圆形重复渐变</h2>
        <p>background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);</p>
    </div>
    
    <div class="box gradient3">
        <h2>指定大小和位置</h2>
        <p>background: repeating-radial-gradient(circle closest-side at top left, red, yellow 10%, green 20%);</p>
    </div>
    
    <div class="box gradient4">
        <h2>椭圆形，指定大小和位置</h2>
        <p>background: repeating-radial-gradient(ellipse farthest-corner at 60% 40%, red, yellow 10%, green 20%);</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>repeating-radial-gradient() 靶心效果示例</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .target {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: repeating-radial-gradient(circle at center, #fff, #fff 10%, #000 10%, #000 20%);
        }
        
        .colorful-target {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: repeating-radial-gradient(circle at center, red, red 10%, yellow 10%, yellow 20%, green 20%, green 30%, blue 30%, blue 40%);
        }
    </style>
</head>
<body>
    <h1>repeating-radial-gradient() 靶心效果示例</h1>
    
    <div class="box">
        <div class="target"></div>
    </div>
    
    <div class="box">
        <div class="colorful-target"></div>
    </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>repeating-radial-gradient() 纹理效果示例</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .texture1 {
            /* 蜂窝纹理 */
            background: repeating-radial-gradient(circle at 50% 50%, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);
        }
        
        .texture2 {
            /* 波纹纹理 */
            background: repeating-radial-gradient(ellipse at 50% 50%, #f0f0f0, #e0e0e0 15px, #f0f0f0 30px);
        }
        
        .texture3 {
            /* 彩色气泡纹理 */
            background: repeating-radial-gradient(circle at 30% 30%, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 10px, transparent 10px, transparent 20px),
                        repeating-radial-gradient(circle at 70% 70%, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.1) 15px, transparent 15px, transparent 30px),
                        repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.1) 20px, transparent 20px, transparent 40px);
        }
    </style>
</head>
<body>
    <h1>repeating-radial-gradient() 纹理效果示例</h1>
    
    <div class="box texture1">
        <h2>蜂窝纹理</h2>
        <p>background: repeating-radial-gradient(circle at 50% 50%, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);</p>
    </div>
    
    <div class="box texture2">
        <h2>波纹纹理</h2>
        <p>background: repeating-radial-gradient(ellipse at 50% 50%, #f0f0f0, #e0e0e0 15px, #f0f0f0 30px);</p>
    </div>
    
    <div class="box texture3">
        <h2>彩色气泡纹理</h2>
        <p>使用多个重复径向渐变创建彩色气泡效果</p>
    </div>
</body>
</html>

常见应用场景

1. 靶心效果

.target {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, #fff, #fff 10%, #000 10%, #000 20%);
}

2. 按钮背景

.button {
    padding: 12px 24px;
    background: repeating-radial-gradient(circle at center, #4CAF50, #45a049 10%, #3d8b40 10%, #3d8b40 20%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

3. 背景纹理

.textured-background {
    background: repeating-radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 10px, transparent 20px);
}

4. 装饰性元素

.decorative {
    width: 100px;
    height: 100px;
    background: repeating-radial-gradient(circle at center, #ff6b6b, #4ecdc4 20%, #45b7d1 40%);
    border-radius: 50%;
}

浏览器兼容性

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

最佳实践

使用具体的颜色停止点：为了获得精确的重复效果，建议明确指定每个颜色停止点的位置
使用长度值：对于需要固定间距的重复模式，使用长度值比百分比更精确
组合多个渐变：可以通过组合多个重复径向渐变创建复杂的图案
注意性能：复杂的重复径向渐变可能会影响性能，尤其是在移动设备上
使用渐变生成工具：对于复杂的重复径向渐变，可以使用在线工具生成代码

练习

创建一个黑白相间的靶心效果
实现一个彩色的同心圆背景
设计一个使用重复径向渐变的按钮，包含悬停效果
创建一个复杂的纹理背景，使用多个重复径向渐变
尝试使用不同的形状和大小值创建各种重复径向渐变效果

小结

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

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