conic-gradient()的核心作用是生成围绕中心点旋转的颜色过渡图像，需配合border-radius、clip-path等实现饼图、加载环等效果；首尾颜色必须完全一致才能闭环无缝，from控制起始角度，at控制锥心位置，伪元素+overflow:hidden是实现平滑旋转动画的关键方案。
conic-gradient() 的核心作用不是“画图”，而是生成一张**围绕中心点旋转的颜色过渡图像**。它本身不绘制形状，但配合 border-radius、clip-path、伪元素和动画，能高效实现饼图、加载环、雷达扫描、放射线等效果。直接用在普通块级元素上，若没做裁剪或圆角，你会看到一个方形渐变贴图——这不是 bug，是设计如此。
为什么 conic-gradient(red, yellow, green) 看起来有接缝？
因为默认从 0deg（正上方）开始，到 360deg 结束，而 green 是终点色，red 是起点色，两者不衔接，视觉上会断开。解决办法只有一个：首尾颜色必须相同。
-
conic-gradient(red, yellow, green, red)✅ 闭环无缝 -
conic-gradient(red, yellow, green)❌ 360° 处出现硬边 - 哪怕只差一个空格或大小写（如
REDvsred），CSS 也不认为它们相等——必须完全一致
from 和 at 参数怎么影响实际效果？
from 控制起始角度，at 控制锥心位置。二者独立生效，但顺序不能错：必须是 from <angle> at <position></position></angle>，反过来会失效。
-
conic-gradient(from 45deg, red, blue)→ 渐变从右上方向（45°）开始顺时针铺开 -
conic-gradient(at top left, red, blue)→ 锥心移到左上角，渐变围绕那个点旋转 -
conic-gradient(from 90deg at 20% 80%, red, yellow, red)→ 起始角为 90°（正右方），锥心在距顶 20%、距左 80% 的位置 - 锥心偏移后，若容器不是正方形，渐变扇形会明显拉伸或挤压——这不是错误，是几何必然
伪元素 + inset + overflow: hidden 是旋转动画的黄金组合
想让锥形渐变“转起来”且边缘不露白边或锯齿？别直接给容器加 animation: rotate，那会连内容一起转。正确做法是用 ::before 承载渐变，并把它撑大一点。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 伪元素设
inset: -25%（或top: -25%; left: -25%; width: 150%; height: 150%），确保旋转时边缘始终在父容器内 - 父容器必须设
overflow: hidden，否则扩大的伪元素会溢出 - 伪元素需
z-index: -1和content: ''，否则不渲染 - 动画写在伪元素上：
animation: rot 3s linear infinite，@keyframes rot { to { transform: rotate(360deg); } }
兼容性差不是借口，但得知道哪些地方真不能用
conic-gradient() 在 Chrome 69+、Firefox 83+、Safari 15.4+ 中原生支持。Edge 已随 Chromium 合并，没问题。真正卡住的是 iOS Safari ≤15.3 和旧版 Android Webview。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (background: conic-gradient(red, red))做特性检测，而非 UA 判断 - 不要 fallback 到
radial-gradient—— 它无法模拟扇形分割逻辑，饼图会全糊成一团 - 真要兼容老设备，得用 SVG 或 Canvas 绘制，CSS 方案无替代路径
- 动态更新颜色或角度？只能靠 JS 修改 CSS 变量，再用
var(--color)注入conic-gradient()—— 但变量不能用于角度值（from var(--deg)不合法）
