CSS-径向渐变-圆形-渐变色调由中心点向四周扩散radial-gradient
需要实现的效果
代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .colorbg 1 { display : block ; width : 400 rpx; height : 400 rpx; border-radius: 100% ; box-shadow: 0 0 300 rpx #e8fefd ; position : absolute ; top : 0 ; left : 0 ; background-image : radial-gradient( circle , #e8fefd , #fcfdff ); } .colorbg 2 { display : block ; width : 400 rpx; height : 400 rpx; border-radius: 100% ; box-shadow: 0 0 300 rpx #d6e8ff ; position : absolute ; top : 30% ; right : 0 ; background-image : radial-gradient( circle , #d6e8ff , #fcfdff ); } |
一、径向渐变
径向渐变(radial-gradient):指从一个中心点开始沿着四周产生渐变效果。
语法:
background:radial-gradient(起始方向,颜色1,颜色2,…);
background:-webkit-radial-gradient(left,red,blue);(兼容性)
background:-webkit-radial-gradient(circle center,red,blue);(方向)
设置形状:
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < title >Document</ title > < style > div { width: 500px; height: 500px; border-radius: 50%; margin: 100px auto; background: -webkit-radial-gradient(circle, red, black); } </ style > </ head > < body > < div ></ div > </ body > </ html > |
效果:
二、重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < title >Document</ title > < style > div { width: 500px; height: 500px; border-radius: 50%; margin: 100px auto; background: repeating-radial-gradient(circle at center, black 0, black 7%, red 7%, red 14%, yellow 14%, yellow 21%, blue 21%, blue 28%, rgb(255, 0, 98) 28%, rgb(255, 0, 98) 35%, rgb(195, 0, 0) 35%, rgb(195, 0, 0) 42%, green 42%, green 49%, yellow 49%, yellow 56%, blue 56%, blue 64%); } </ style > </ head > < body > < div ></ div > </ body > </ html > |
效果:
备注:径向渐变参考转载于:https://ispacesoft.com/121011.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验