CSS3渐变属性有哪些：函数、参数与常用写法

CSS3渐变并非独立属性，而是通过background-image或background配合渐变函数实现。本文梳理4种核心渐变函数及方向、角度、色标、形状、尺寸等关键参数，提供线性、径向与重复渐变的常用写法，帮助开发者快速判断场景并写出可维护的渐变背景。

CSS3渐变并非独立属性，而是通过background-image或background配合渐变函数实现。本文按“相关CSS属性—渐变函数—控制参数—常用写法”的结构梳理核心内容，帮助开发者快速判断线性、径向与重复渐变的适用场景，并直接落地可维护的代码。

CSS3渐变不是独立属性

严格来说，CSS3渐变没有单独的“渐变属性”，通常通过background-image或background来使用。日常所说的“渐变属性”实际包含两类内容：一是相关CSS属性，二是决定效果的渐变函数与控制参数。

相关CSS属性：background-image、background
常用渐变函数：linear-gradient()、radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient()
常用控制参数：方向、角度、颜色、色标位置、形状、尺寸、圆心位置、重复方式

理解这一层结构后，就不会把属性、函数和参数混为一谈。线性渐变主要关注方向与角度，径向渐变主要关注形状、尺寸和圆心位置，重复渐变则在前两者基础上增加色标间距控制。

线性渐变让颜色沿一条直线过渡，核心控制项包括渐变方向、角度、参与过渡的颜色、每个颜色的停靠位置，以及是否重复。判断是否该用线性渐变很简单：只要关心“往哪个方向过渡”，通常优先考虑它。

径向渐变适合光晕、聚焦、高光这类从中心向外扩散的效果。除颜色和色标外，还能控制形状、尺寸和圆心位置。判断标准：如果关注“从哪个中心点向四周扩散”，更适合选径向渐变。

重复渐变在线性或径向基础上增加规律排列效果，适合条纹、网格、波纹或背景纹理。核心在于色标间距是否合适，间距越明确，重复边界越清晰。

线性渐变基础写法：background-image: linear-gradient(to right, #4facfe, #00f2fe);
线性渐变角度与色标：background-image: linear-gradient(45deg, #ff6a00 0%, #ee0979 50%, #8e2de2 100%);
径向渐变基础写法：background-image: radial-gradient(circle at center, #ffffff 0%, #4c6ef5 70%, #1c2b5a 100%);
重复线性渐变条纹：background-image: repeating-linear-gradient(90deg, #f5f5f5 0 10px, #e0e0e0 10px 20px);
重复径向渐变圆环：background-image: repeating-radial-gradient(circle at center, #66ccff 0 12px, #ffffff 12px 24px);