css 径向渐变

作者：风中孤狼发布日期:2026-06-07 浏览:10

/* 径向渐变示例代码 */

/* 基本的径向渐变 */
background: radial-gradient(circle, red, yellow);

/* 解释说明：
- `radial-gradient` 用于创建一个径向渐变背景。
- `circle` 表示渐变的形状为圆形，也可以使用 `ellipse` 表示椭圆形。
- `red, yellow` 表示从红色到黄色的渐变。
*/

/* 更复杂的径向渐变 */
background: radial-gradient(50% 50%, closest-side, red, yellow, blue);

/* 解释说明：
- `50% 50%` 表示渐变的中心位于元素的中心位置。
- `closest-side` 表示渐变的大小基于最近的边。
- `red, yellow, blue` 表示从红色到黄色再到蓝色的渐变。
*/

上一篇：css 设置背景图片

下一篇：css标签选择器