用conic-gradient实现圆环需固定宽高容器和border-radius:50%，通过外层conic-gradient绘环、内层伪元素白底遮罩模拟空心效果，配合position:absolute避免布局干扰。
用 conic-gradient 实现纯 CSS 圆环卡片背景
圆环不是“卡片形状”，而是卡片内部的视觉元素；直接拿 border-radius: 50% 做不出环，得用渐变。最稳妥、兼容性好（Chrome/Firefox/Safari 均支持）的方式是 conic-gradient 配合固定宽高容器。
关键点：
-
conic-gradient必须作用在块级元素上，且该元素需有明确的width和height（不能依赖内容撑开） - 圆环“粗细”由容器尺寸和内层遮罩共同控制——常见做法是套两层：外层
div画环，内层同尺寸div白底居中盖住中心，模拟空心效果 - 进度类圆环可绑定
data-progress属性 + JS 动态改background，但静态展示直接写死角度更轻量
.ring-card {
width: 160px;
height: 160px;
position: relative;
}
.ring-card::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient(#3b82f6 70%, #e5e7eb 70%);
}
.ring-card::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
clip-path 做环形裁切时为什么总漏出直角？
很多人试 clip-path: circle(40% at 50% 50%) 想裁出圆环，结果发现只是圆形裁剪，不是环。因为 clip-path 只能裁“实心区域”，无法定义内外径——它裁的是形状边界，不是路径差集。
真正要裁环形，必须用 SVG <clippath></clippath> + <circle></circle> 嵌套，或退而求其次：用两个重叠的 clip-path（一个大圆减一个小圆），但目前 CSS 不支持布尔运算，所以实际不可行。
立即学习“前端免费学习笔记（深入）”；
可行替代：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
mask-image配合径向渐变做镂空环（兼容性略低，Firefox 需前缀） - 回到
conic-gradient方案，视觉等效且可控性强 - 若必须用
clip-path，仅限单边弧形裁切（如四分之一圆环），靠border-color透明技巧模拟，见知识库中.circle示例
Flex/Grid 卡片布局里嵌入圆环，怎么避免换行错位？
圆环元素如果没设固定尺寸或未触发 BFC，放进 display: flex 或 display: grid 容器后容易被压缩变形，尤其当父容器用 flex: 1 或 grid-template-columns: repeat(auto-fit, minmax(...))) 时。
必须守住两条线：
- 圆环容器本身加
flex-shrink: 0（Flex）或min-width: 0（Grid 中子项默认会收缩） - 确保圆环内部所有伪元素（
::before/::after）用position: absolute，不参与文档流，否则会影响父容器高度计算 - 若卡片含文字描述，注意
align-items: center对齐的是 flex 容器主轴，圆环垂直居中要用margin: auto或place-content: center
圆环和文字/图片融合时，阴影和层级容易出问题
圆环常被当作装饰层，但一旦加 box-shadow 或与其他元素（如头像 img、标题 h3）叠加，z-index 和 stacking context 就会失控。
典型症状：阴影被上层文字盖住、圆环边缘发虚、hover 效果只触发部分区域。
解法很直接：
- 给圆环容器设
position: relative和明确z-index（比如z-index: 1），文字层设z-index: 2，避免依赖自然层叠顺序 -
box-shadow别用太大的blur值（>12px 易糊），改用多重阴影模拟深度：box-shadow: 0 0 4px rgba(0,0,0,0.1), 0 0 12px rgba(0,0,0,0.05) - 如果圆环要承载图片，别把
img直接塞进环形容器——先用object-fit: cover做好裁切，再用clip-path: circle()二次包裹，否则缩放错位
