径向渐变由css的radial-gradient()函数实现，html仅提供容器；必需至少两个颜色值，否则报错或透明；默认中心50% 50%、椭圆、farthest-corner；需确保容器有明确高度，ie需fallback。
径向渐变不是靠 HTML 实现的，而是纯 CSS 的 radial-gradient() 函数控制；HTML 只负责提供容器，真正生效的是 background 或 background-image 里写的 CSS 值。
radial-gradient() 基本写法和必需参数
必须明确指定至少两个颜色值，否则会报错或渲染为透明。浏览器默认中心在 50% 50%、形状为 ellipse、尺寸为 farthest-corner，但这些默认值在不同场景下容易出意料之外的效果。
-
radial-gradient(circle, #ff6b6b, #4ecdc4)：显式声明圆形，两端色值，最简可用形式 -
radial-gradient(at top left, #fff, #000)：把渐变中心移到左上角，at后接位置关键词或坐标 - 省略形状（如只写
radial-gradient(#a1c4fd, #c2e9fb)）会按容器宽高比自动拉伸成椭圆，不是正圆
常见错误：背景不显示或显示为纯色
最常踩的坑是忘了给元素设高度，或者父容器没内容撑开——radial-gradient 是背景图层，若容器 height: 0 或 display: inline，就看不见。
- 确保容器有明确尺寸：
height: 100vh或min-height: 100vh，避免依赖内容撑高 - 不要只写
background: radial-gradient(...)，漏掉background-color时，若渐变加载失败或语法错，可能退化为透明 - IE 不支持
radial-gradient（连带所有 -ms- 前缀都无效），需要 fallback：background: #f0f0f0; background: radial-gradient(...)
控制渐变范围和边缘过渡
用尺寸关键词或长度值能精确控制渐变“多大才结束”，而不是默认铺满整个容器。
-
radial-gradient(circle at center, #ff9a9e 0%, #fad0c4 100%)：百分比控制颜色停点，0% 到 100% 是线性过渡区间 -
radial-gradient(circle 50px at center, #3498db, #2c3e50)：50px指渐变“半径”，超出部分直接是最后一色（不是重复） - 用
closest-side/farthest-side等关键词比写死像素更响应式，但注意它们基于最近/最远边计算，非直观
真正难的是让渐变在不同屏幕尺寸下视觉一致——radial-gradient 的尺寸单位（px、%、em）对最终效果影响极大，且无法像图片那样缩放适配；调试时建议先固定容器尺寸，再调渐变参数，最后加响应式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
