clip-path 无法直接裁剪 table-cell 元素，需用绝对定位容器包裹内容并设置 clip-path: circle()，配合 border-radius 降级及 min(100%, var(--size)) 动态计算半径以适配不等宽高。
clip-path 无法直接裁剪 table-cell 元素
直接对 <td> 或 <th> 设置 clip-path: circle(50%) 通常无效——因为表格单元格默认是 display: table-cell，而 clip-path 在该显示模式下不触发裁剪（尤其在 Chrome 和 Safari 中表现明显）。这不是写法错误，而是规范限制。
可行路径只有一条：把单元格内容“抽出来”，用支持 clip-path 的容器包裹它（如 div、span），再让该容器撑满单元格并设为圆形。
- 确保父
<td>设position: relative - 内部加一层
<div class="circle-cell">内容</div>，设position: absolute; inset: 0 - 对这个
div应用clip-path: circle(50% at center)，并配border-radius: 50%作降级（部分旧环境可能忽略clip-path） - 若内容是图片，注意
object-fit: cover防止拉伸变形
用 CSS 自定义属性控制圆形尺寸更灵活
硬编码 circle(50%) 会受限于单元格宽高是否相等。实际中表格行列宽高常不一致，导致圆形被压扁或留白。推荐用 circle(calc(min(100%, var(--size)) / 2) at center) 动态取最小边长的一半作为半径。
示例：
立即学习“前端免费学习笔记（深入）”；
<td style="--size: 60px;"> <div class="circle-wrapper">A</div> </td>
.circle-wrapper 样式：
.circle-wrapper {
position: absolute;
inset: 0;
clip-path: circle(calc(min(100%, var(--size)) / 2) at center);
display: grid;
place-items: center;
}
-
--size可按需设在<tr>、<tbody>或单个<td>上，便于批量控制或单独定制 - 避免用
%值直接参与calc()中的除法（如50% / 2），浏览器解析不稳定；优先用min(100%, var(--size))显式限定上限
IE 和旧版 Safari 下的 fallback 方案
clip-path 在 IE 完全不支持，iOS Safari ≤ 12.5 对 circle() 支持不完整。如果必须兼容，不能只靠 clip-path。
- 用
border-radius: 50%+overflow: hidden是最稳妥的降级，但要求容器宽高等比（否则仍是椭圆） - 可结合
@supports (clip-path: circle())进行特性检测，仅对支持环境启用clip-path，其余走border-radius路线 - 若单元格内是纯文本（如头像首字母），建议额外加
line-height: 1和font-size: 75%控制垂直居中精度，避免place-items在某些安卓 WebView 中失效
表格结构变化时 clip-path 容易失效的场景
当表格开启响应式（如 table-layout: fixed）、或单元格内容动态插入/折叠（如展开详情行）、或使用 colspan/rowspan 时，inset: 0 的绝对定位容器可能错位或尺寸异常。
- 遇到错位，优先检查父
<td>是否有padding—— 绝对定位容器默认从 content box 起算，需用box-sizing: border-box并显式减去 padding - 含
rowspan的单元格高度由多行决定，此时min(100%, var(--size))中的100%是不确定值，建议改用固定--size值，而非依赖百分比 - JavaScript 动态渲染表格后，记得触发一次
offsetHeight读取，强制重排，否则部分浏览器可能延迟应用clip-path
真正麻烦的不是怎么画圆，而是让圆始终贴合单元格边界——这取决于你能否稳定控制容器尺寸和定位上下文。一旦嵌套了 flex/grid 表格模拟、或用了第三方表格组件，clip-path 很可能被内部 transform 或 will-change 意外截断。
