我的知识记录

改变网站背景颜色如何添加渐变

实现方法

1. 线性渐变（Linear Gradient） 

 
css
body { background: linear-gradient(to right, #ff9966, #ff5e62); }
  • to right：从左到右渐变（可改为 to bottom、45deg 等）
  • #ff9966, #ff5e62：渐变的起止颜色
2. 径向渐变（Radial Gradient） 

 
css
body { background: radial-gradient(circle, #ff9966, #ff5e62); }
  • circle：圆形渐变（可改为 ellipse）
3. 浏览器兼容写法 

 
css
body { background: -webkit-linear-gradient(left, #ff9966, #ff5e62); /* Safari */ background: -o-linear-gradient(right, #ff9966, #ff5e62); /* Opera */ background: -moz-linear-gradient(right, #ff9966, #ff5e62); /* Firefox */ background: linear-gradient(to right, #ff9966, #ff5e62); /* 标准语法 */ }

进阶技巧

🎨 使用 CSS Gradient Generator 在线生成代码
🎨 结合 background-size 和 animation 制作动态渐变效果
 

改变网站背景颜色如何添加渐变

标签：

更新时间：2025-07-22 16:46:01

上一篇：网站图标获取后如何添加到网站：放入根目录 + HTML head引用

下一篇：网页底下的小字是什么？

转载请注明原文链接：https://www.muzicopy.com/suibi/25305.html

关注热点