HTML中CSS radial-gradient创建径向渐变背景的用法说明-html教程-PHP中文网

radial-gradient() 必须显式写 circle 和 at center 才能确保圆形且居中；仅写 radial-gradient(red, blue) 会默认为 ellipse 和 farthest-corner，导致拉伸或偏移。

html中css radial-gradient创建径向渐变背景的用法说明

radial-gradient() 必须显式写 circle 和 at center

只写 radial-gradient(red, blue) 时，浏览器默认用 ellipse 形状 + farthest-corner 尺寸，容器宽高不等就会拉伸成椭圆，且中心可能因 background-position 被覆盖而偏移。这不是 bug，是规范行为。

真正可控的写法必须带 circle 和 at center：

radial-gradient(circle at center, #fff, #000) ✅ 最简可靠形式
radial-gradient(circle center, #fff, #000) ❌ 缺 at，整个声明被忽略
radial-gradient(ellipse at center, #fff, #000) ✅ 但仅在正方形容器里才像圆

移动端 Safari 对 at 20px 30px 这类绝对定位支持不稳定，优先用 at 50% 50% 或 at center。

尺寸关键词 closest-side 和 farthest-corner 怎么选

尺寸参数决定渐变“铺多大”，不是可有可无的装饰项。它直接影响视觉是否饱满或是否被裁切。

closest-side：半径取到最近那条边的距离，适合按钮悬停光晕、卡片内嵌聚焦效果，但容器太窄时会缩成一小团
farthest-corner：半径延伸到最远对角，全屏背景推荐用它，视觉饱满，兼容性好
100px 这类固定值慎用：响应式布局下容易在小屏溢出或在大屏留白

别用 background-size: cover 去“适配”径向渐变——它对渐变无效，只作用于图片。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

颜色停止点位置写错会导致外圈消失

radial-gradient(circle at center, red 0%, blue 100%) 看似合理，实际蓝色只占最外一圈极窄区域，肉眼几乎不可见。这是因为径向渐变的 0%→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 中渲染异常

透明度过渡必须用 rgba() 或 hsla()，不能靠 opacity 整体控制——它会影响整个元素，不是渐变内部的 alpha 变化。

fallback 色和多背景叠加的坑

IE9 及以下完全不支持 radial-gradient，IE10 需 -ms-radial-gradient 且不支持 at 语法。现代项目虽可忽略 IE，但 fallback 仍有必要。

降级写法必须前置纯色：background: #f5f5f5; background: radial-gradient(circle at center, #f5f5f5, #e0e0e0);
叠加多个渐变时，每个 radial-gradient 的 at 是独立的，background-position 只影响第一层
写多背景时顺序是“顶层→底层”，逗号分隔：background: radial-gradient(...), linear-gradient(...)

最易被忽略的是：渐变本身不自动填满元素，没配 no-repeat / 100% 100% 或尺寸关键词时，空白处会漏出 fallback 色或父级背景——这常被误认为“渐变没生效”。