table-cell里shape-outside完全不生效的根本原因是其无法触发浮动上下文，浏览器直接忽略该声明；必须在<td>内嵌套独立块级容器（如<div class="shape-wrap">），显式设置float、明确宽高及内联SVG路径才能实现文字环绕。
table-cell 里用 shape-outside 为什么完全不生效
根本原因：table-cell 元素无法触发浮动上下文，shape-outside 直接被浏览器忽略——不是写错了，是它压根没资格参与文字环绕计算。
常见错误现象：shape-outside: circle() 在 <td> 或 <th> 上写了也没反应，DevTools 里该声明被划掉或显示为 none；文字仍按矩形盒子排布，哪怕加了 float: left 也无效（table-cell 会无视 float）。
-
table-cell是 CSS 表格布局的原子单元，天生不接受float，也不创建 BFC，更不传播浮动区域 - 即使强制设
display: block，也会破坏表格结构（<td>不再对齐行列，colspan/rowspan失效） - 所有基于
shape-outside的图文环绕逻辑，都依赖「浮动元素 + 普通流内联内容」这一对协作关系，table-cell无法满足任一环节
想在表格区域实现非矩形文字环绕，只能绕开 <td>
可行路径只有一条：在 <td> 内部嵌套一个独立的、可浮动的块级容器，把 shape-outside 落在它身上。
- 必须用
<div class="shape-wrap">这类包裹元素，不能直接写在<td>上 - 该包裹元素需显式设
float: left或float: right，且display: block - 必须定义明确宽高：
width和height缺一不可（aspect-ratio在 Safari 15.4+ 可用，但旧版 Safari 不支持） -
<td>自身要避免overflow: hidden或contain: layout，否则会裁掉浮动传播区 - 后续文字必须是
<p>、<div>等块级元素，且紧跟在浮动元素之后，中间不能插clear或 flex/grid 容器
示例结构：
立即学习“前端免费学习笔记（深入）”；
<td> <div class="shape-wrap"><img src="logo.svg" alt=""></div> <p>这段文字会绕着 shape-wrap 定义的形状排布</p> <p>第二段也自动跟随</p> </td>
shape-outside: url() 在表格环境里为何总加载失败
本地双击打开 HTML（file:// 协议）时，shape-outside: url(logo.png) 必然静默失效——Chrome/Firefox/Safari 全部跳过 alpha 解析，不报错、不警告，文字就按矩形绕。
- 真正能跑通的只有两条路：
– 部署到 HTTP 服务（如python3 -m http.server），并确保响应头含Access-Control-Allow-Origin: *
– 改用内联 SVG：shape-outside: url(#my-shape)，且<svg>必须在同个 HTML 文件的<body>内（不能外链、不能放<head>） - 别试 base64：
shape-outside: url("data:image/png;base64,...")仍是跨域资源，同样被丢弃 - 检查 PNG 是否真有 alpha 通道：用 Figma/GIMP 打开，确认背景透明度为 0；导出时勾选「保留透明度」
polygon() 坐标在表格单元格里特别容易偏移
因为 polygon() 坐标系基于浮动元素自身宽高，而 <td> 宽高常由表格自动计算，不稳定——导致描点位置飘忽、形状变形。
- 统一用
%单位：所有坐标都相对于浮动包裹元素的width和height，比如polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%) - 绝对不用混合单位：
polygon(0 0, 100% 0, 200px 100%, 0 100%)在缩放或重排时必然错位 - 调试必加两行：
outline: 1px solid red看浮动元素真实范围，background: rgba(0,0,0,0.1)叠半透背景验证描点是否贴合 - 顺时针闭合路径：起点和顺序决定渲染朝向，逆时针可能在 Firefox 中翻转或不显示
真正卡住人的从来不是怎么写 polygon()，而是没意识到表格单元格的尺寸弹性会让所有相对坐标失去锚点。
