css径向渐变中必须用rgba()或hsla()在颜色值内嵌入alpha透明度（如rgba(0,0,0,0)），或使用transparent关键字；不可用svg的stop-color属性，需通过色标位置（如0%、70%）控制平滑过渡。
径向渐变中不能直接用 stop-color 设置透明色——这个属性只在 SVG 的 <stop></stop> 元素里有效，CSS 的 radial-gradient() 函数根本不识别它。
radial-gradient 里怎么写透明色？
必须把透明信息写进颜色值本身，而不是靠独立的 stop-color 或 stop-opacity。CSS 渐变函数不支持 SVG 那套 stop 属性。
- 用
rgba(0, 0, 0, 0)表示完全透明的黑，rgba(255, 255, 255, 0.3)表示半透白 - 用
hsla(240, 100%, 50%, 0.2)同样有效，alpha 值控制透明度 -
transparent是合法关键字，等价于rgba(0,0,0,0)，但仅适用于全透明场景 - 错误写法：
radial-gradient(circle, red, stop-color: rgba(0,0,0,0))—— 浏览器直接忽略整个声明
为什么 offset + rgba 比单纯用 transparent 更可控？
单靠 transparent 只能做“有→无”的硬切，而用 rgba() 配合位置参数才能实现平滑衰减。比如焦点遮罩常用这种写法：
background: radial-gradient( circle at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70% );
这里两个关键点：
-
0%和70%是offset，决定透明过渡起止位置（不是 CSS 的offset属性，是 color-stop 自带的位置参数） - 如果写成
transparent 70%，浏览器会把它当rgba(0,0,0,0)处理，但无法表达中间的渐变灰阶 - 省略位置时，浏览器自动均分，容易导致透明过渡过快或过慢，尤其在小容器里明显
常见报错和渲染异常
遇到渐变不显示、背景变纯色、或只显示第一段颜色，大概率是下面几个问题：
- 写了
stop-color或stop-opacity：这些是 SVG 属性，CSS 里无效，整条background声明会被丢弃 - RGBA 值格式错误：比如
rgba(0,0,0,0.0)少了个空格，或写成rgba(0, 0, 0, .5)（虽然部分浏览器容忍，但 Safari 旧版会拒斥） - 径向渐变中心偏移写错：如
at 50% 50%缺少单位或顺序颠倒，可能导致透明区域完全偏离可视区 - 未设
background-size或容器无宽高：渐变画出来了，但容器塌陷，看起来像没生效
真正要控制透明过渡，核心就两条：老实用 rgba() 或 hsla() 写颜色，位置用 color-stop 后缀百分比；别碰任何带 stop- 前缀的属性——那不是给 CSS 渐变准备的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
