HTML中如何使用conic-gradient创建锥形渐变背景-html教程-PHP中文网

conic-gradient需浏览器支持（chrome 69+、firefox 63+、safari 15.4+），语法为background: conic-gradient(from , , ...);，起始角默认0deg（正上方），顺时针渐变，须设固定宽高、background-size: contain和background-repeat: no-repeat以正确显示。

html中如何使用conic-gradient创建锥形渐变背景

conic-gradient 语法和基本写法

浏览器支持 conic-gradient 的前提是启用现代 CSS 支持（Chrome 69+、Firefox 63+、Safari 15.4+），旧版 Safari 需加 -webkit-conic-gradient 前缀，但注意：WebKit 早期实现与标准不兼容，仅建议在 Safari 15.4+ 使用无前缀版本。

基础格式是：background: conic-gradient(from <angle>, <color-stop>, <color-stop>);</color-stop></color-stop></angle>。其中 from 指定起始角度（默认为 0deg，即正上方），渐变按顺时针方向展开，0° → 360° 绕中心一圈。

from 0deg：红色从正上方开始（不是左方）——这点和 linear-gradient 完全不同，容易误判方向
颜色停止点可写为 #f00 25%, #0f0 50%, #00f 75%，百分比表示绕圆周的角度位置，不是线性距离
不写 from 时默认从 0deg（12 点钟方向），不是 90deg（3 点钟方向）

让锥形渐变真正“居中显示”的关键设置

直接写 conic-gradient(red, blue) 很可能只看到一小块色块，甚至完全不可见——因为默认渐变尺寸由容器内容撑开，且重复模式为 repeat（非 no-repeat）。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

必须显式控制尺寸和定位：

给容器设固定宽高（如 width: 200px; height: 200px;），否则渐变区域可能坍缩
用 background-size: 200px 200px 或 background-size: contain 确保渐变填满区域
加 background-repeat: no-repeat，否则会平铺出多个同心圆环
推荐组合：background: conic-gradient(red, yellow, green, cyan, blue, magenta); background-size: contain; background-repeat: no-repeat;

常见错误：Safari 中渐变消失或错位

Safari 15.4 之前使用 -webkit-conic-gradient 时，角度行为与标准相反：0deg 表示正右方（而非正上方），且不支持 from 关键字。升级后若仍失效，大概率是缓存了旧 CSS 或未清除前缀。

检查 DevTools 的 computed 样式，确认 background-image 是否解析为 conic-gradient，而不是被忽略
移除所有 -webkit- 前缀，只保留标准写法；Safari 15.4+ 已完全支持无前缀版本
避免在 @supports 中错误检测：@supports (background: conic-gradient(red, red)) 是可靠写法；@supports (-webkit-conic-gradient: ...) 无效（语法错误）
如果容器是 inline 元素（如 <span></span>），需先设 display: inline-block 或 block，否则宽高约束不生效

实用技巧：用 conic-gradient 实现加载动画或色盘 UI

锥形渐变最自然的用途是旋转动画（比如 loading indicator）或交互式色环选择器。但注意：纯 CSS 动画无法直接“旋转”渐变本身，得靠 transform: rotate() 作用于容器。

实现 360° 加载动画：animation: spin 1s linear infinite; + @keyframes spin { to { transform: rotate(360deg); } }
色盘点击取色需配合 JS：监听 click 事件，用 clientX/clientY 和元素 getBoundingClientRect() 计算相对于中心的角度，再换算为 0–360 范围
避免在大尺寸容器（如全屏背景）上直接用 conic-gradient，性能较差；更适合固定尺寸组件（按钮、卡片、控件）
若需透明底色，不要用 transparent 作色标（会导致灰阶过渡），改用 rgba(255,0,0,0.8) 等带 alpha 的值