颜色和渐变通过CSS实现视觉提升，支持名称、十六进制、RGB、RGBA等颜色表示，结合linear-gradient可创建多方向、多角度、多色及透明渐变效果，适用于背景与遮罩设计。
在网页设计中，颜色和渐变是提升视觉效果的重要手段。CSS 提供了丰富的颜色表示方式以及强大的 linear-gradient 功能，可以创建平滑的线性渐变背景。下面通过几个实用示例，帮助你快速掌握它们的用法。
基础颜色表示方法
CSS 支持多种颜色写法，常见的有：
- 颜色名称：如 red、blue、green
- 十六进制：如 #ff0000（红色）、#00ff00（绿色）
- RGB 值：如 rgb(255, 0, 0)
- RGBA 带透明度：如 rgba(255, 0, 0, 0.5)
这些颜色值可以直接用于背景、文字、边框等属性。
简单线性渐变背景
使用 linear-gradient 可以从一种颜色平滑过渡到另一种。语法如下：
立即学习“前端免费学习笔记（深入）”；
background: linear-gradient(direction, color1, color2, …);
例如，创建一个从上到下的蓝色到白色的渐变：
<font face="Courier New"> .example-1 { width: 200px; height: 100px; background: linear-gradient(#007bff, #ffffff); } </font>
如果不指定方向，默认是从上到下。你也可以指定角度或关键词：
- to bottom：从上到下（默认）
- to right：从左到右
- 45deg：45度角（顺时针）
多色与角度渐变
你可以添加多个颜色节点，实现更丰富的效果。比如彩虹色条：
<font face="Courier New"> .rainbow { height: 50px; background: linear-gradient( to right, red, orange, yellow, green, blue, indigo, violet ); } </font>
或者使用角度创建对角渐变：
<font face="Courier New"> .diagonal { width: 200px; height: 200px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); } </font>
带透明度的渐变遮罩
结合 RGBA 颜色，可以制作出透明渐变，常用于图片遮罩：
<font face="Courier New"> .overlay { position: relative; background-image: url('your-image.jpg'); background-size: cover; } .overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: 1; } </font>
这个例子在图片上叠加了一个从底部黑透明到顶部全透明的渐变，增强文字可读性。
基本上就这些常用场景。掌握颜色和 linear-gradient 的搭配，能让你的页面更具层次感和现代感。不复杂但容易忽略细节，比如方向写法和浏览器兼容性（现代浏览器都支持）。多试几种组合，效果立竿见影。