用rgba()配合linear-gradient可实现柔和淡入效果，关键是以同色系不同透明度的rgba值作为渐变起止色标，避免使用transparent以防偏色，并可通过模糊或阴影进一步柔化边缘。
用 rgba() 配合 CSS 渐变（linear-gradient）就能做出柔和的淡入色块效果，关键不是只调透明度，而是让颜色本身从“透明”自然过渡到“实色”。
用 rgba 做起点色，让渐变从“看不见”开始
在 linear-gradient 中，把第一个色标设为带 alpha 的 rgba，比如 rgba(100, 150, 200, 0) —— 这是完全透明的蓝，人眼看不到；第二个色标用同色系但不透明的值，比如 rgba(100, 150, 200, 0.8)。这样浏览器会自动插值混合，产生平滑淡入。
- 别用
transparent开头，它等价于rgba(0,0,0,0)，和你要的颜色无关，容易偏灰或发暗 - 推荐写法：
background: linear-gradient(to bottom, rgba(255, 128, 64, 0), rgba(255, 128, 64, 0.9)) - 方向很重要：淡入通常用
to bottom（上透明→下实色），若要从左淡入就用to right
加个模糊或阴影让边缘更柔（可选增强）
纯渐变有时边缘还是略硬，可以叠加一层轻微高斯模糊或内阴影来软化：
- 用伪元素 +
backdrop-filter: blur(2px)（注意兼容性，Safari/Chrome 支持好） - 或加
box-shadow: inset 0 -4px 12px -6px rgba(0,0,0,0.1)模拟底部柔边 - 慎用大模糊值，容易糊掉文字或内容，2–4px 足够
适配深色模式的小技巧
如果页面支持深色模式，rgba 的 RGB 值最好用 HSL 或 CSS 自定义属性动态控制，避免硬编码导致反差失衡：
立即学习“前端免费学习笔记（深入）”；
- 定义：
:root { --accent-r: 255; --accent-g: 128; --accent-b: 64; } - 渐变中写：
rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0) - 配合
@media (prefers-color-scheme: dark)动态改变量值
基本上就这些。核心就是：同色系、不同透明度、线性插值——不复杂但容易忽略细节。
