radial-gradient() 默认中心为center但受background-position覆盖，形状默认ellipse易拉伸，需显式写circle和at center；颜色停止点需合理分布避免外圈消失，且须添加fallback色防止解析失败。
radial-gradient() 默认就是从中心向外扩散的，但“中心”和“扩散方式”容易被误解——不写 at 不代表真居中，不写 circle 也不等于你看到的是正圆。
radial-gradient() 的默认中心点其实是 center，但会被 background-position 覆盖
很多人写了 background: radial-gradient(red, blue)，发现渐变偏了。不是函数错了，而是 CSS 背景层叠加逻辑在起作用：
- 如果同时设了
background-position: top left，它会覆盖radial-gradient内部的隐式at center - 多背景图（比如叠加两个
radial-gradient）时，每个渐变的at是独立的，background-position只影响第一层 - 移动端 Safari 对
at 20px 30px这类像素定位支持不稳定，优先用at center或at 50% 50%
稳妥写法：background: radial-gradient(circle at center, red, blue) —— 显式声明形状和位置，不依赖隐式行为。
ellipse 是默认形状，但容器宽高不等时会拉伸成“压扁的椭圆”
你写 radial-gradient(red, blue)，浏览器按 ellipse 渲染，实际效果是：渐变边界贴合容器四边。结果就是——宽高比 ≠ 1 的容器里，根本看不到正圆。
- 想严格圆形？必须加
circle关键字 - 只加
circle还不够：如果容器是 200×400px，circle半径取 min(200,400)/2 = 100px，超出部分直接裁切，下半截可能没颜色 - 补救方法：用尺寸关键词替代固定形状，比如
closest-side（碰到最近的边就停）或farthest-corner（撑满对角）
例如：background: radial-gradient(closest-side circle at center, #fff, #000)，比纯 circle 更适应响应式布局。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
颜色停止点（color stop）位置不对，会导致外圈颜色“消失”或生硬断裂
径向渐变的半径增长是非线性的，0% 到 100% 不是均匀分布。常见错误是这样写：radial-gradient(circle, red 0%, blue 100%) —— 蓝色只占最外一圈极窄区域，肉眼几乎看不见。
- 给主色留空间：用
red 0%, red 70%, blue 100%，让红色铺开主体区域 - 做柔边效果？加透明过渡：
rgba(255,0,0,1) 0%, rgba(255,0,0,1) 80%, rgba(255,0,0,0) 100% - stop 位置不能倒序：
red 50%, red 30%在部分 Android WebView 中会渲染异常
别迷信“自动过渡”，径向渐变对 stop 分布比线性渐变更敏感。
兼容 fallback 和性能陷阱必须手动加
现代浏览器都支持 radial-gradient()，但有两个隐形坑：
- IE9 及更早版本完全不识别，必须加降级：
background: #ff0000; background: radial-gradient(...) - 在
transform: scale(1.2)或will-change: transform元素上叠加大面积径向渐变，某些低端 Android 设备会退回到 CPU 渲染，出现明显卡顿 - 动画
radial-gradient(at ...)中的at值——目前所有主流浏览器都不支持动画，想动中心点只能靠 JS 拼字符串重设style.background
真正容易被忽略的，是那个看似多余的 background: #xxx fallback —— 它不只是为老浏览器准备的，更是防止 CSS 解析失败时整个背景变空白的保险绳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
