css渐变背景,linear-gradient()线性渐变和radial-gradient()径向渐变
1.简单的线性渐变
.layout{ width: 100%; min-height: 100vh; background: linear-gradient(#FFE8E9,rgba(0,0,0,0) 200px); }
2.层叠多层的渐变(左右+上下+背景图)
.layout{ width: 100%; min-height: 100vh; background: url(/static/bg.png) no-repeat 80% 50px, linear-gradient(to bottom, transparent -100px,#fff 300px), linear-gradient(to right, #D2EEF9,#FFD1DE); }
3.多重径向渐变,(线性渐变+径向渐变的组合)
.layout{ width: 100%; min-height: 100vh; background: linear-gradient(to bottom,transparent,#fff 400px), radial-gradient(90% 300px at left top, #95E0DC, transparent), radial-gradient(60% 300px at right top, #D3CBFC, transparent); }
4.更加复杂的混合型渐变背景
.layout{ width: 100%; height: 100vh; background: linear-gradient(to bottom, transparent, #fff 260px), radial-gradient(20% 150px at 70% 230px, rgba(0,210,255,0.2),transparent), radial-gradient(40% 180px at 80% 50px, rgba(249,167,176,0.3),transparent), radial-gradient(50% 300px at 90% 100px, rgba(212,230,241,0.8),transparent), radial-gradient(20% 150px at 0px 0px, rgba(162,213,239,0.5),transparent), radial-gradient(30% 200px at 100px 50px, rgba(249,167,176,0.5),transparent), #FFF0F5; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析