radial-gradient（径向渐变）

最新推荐文章于 2025-06-03 13:51:29 发布

原创最新推荐文章于 2025-06-03 13:51:29 发布 · 4.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

前端同时被 3 个专栏收录

65 篇文章

订阅专栏

css3

47 篇文章

订阅专栏

css

42 篇文章

订阅专栏

本文详细介绍了CSS中的径向渐变（radial-gradient）使用方法，包括默认形状、手动指定大小、渐变位置等。通过示例展示了如何创建不同形状和位置的径向渐变背景，并总结了径向渐变的完整语法，帮助开发者更好地理解和应用这一视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

1、radial-gradient( )径向渐变（放射性效果）

2、默认情况下，径向渐变的形状是根据元素的形状来计算的

正方形- ->圆形
长方形- ->椭圆形

3、我们也可以手动指定径向渐变的大小

可选值：

		circle		圆形
		
		ellipse		椭圆

示例：

background-image:radial-gradient(100px 100px , red , yellow);

background-image:radial-gradient(circle , red , yellow);

background-image:radial-gradient(ellipse , red , yellow);

4、也可以指定渐变的位置

示例：
	   
background-image:radial-gradient(100px 100px at 0 0, red , yellow);

background-image:radial-gradient(100px 100px at 100px 100px,
 red , yellow);
 
background-image:radial-gradient(100px 100px at center center,
 red , yellow);

background-image:radial-gradient(at top left, red , yellow);

总结语法

radial-gradient(大小 at 位置,颜色 位置,颜色 位置,颜色 位置)

大小：

		circle					圆形
		
		ellipse					椭圆
		
		closest-side			近边
		
		closest-corner			近角
		
		farthest-side			远边
		
		farthest-corner			远角
--------------------------------------------------------------------

位置：

		top right left center bottom	位置方位词在前面需要加上`at`
		
		100px							直接用像素