shape-outside 在表格元素中无效，因其依赖浮动机制，而表格布局强制脱离文本流且不支持 float；正确做法是将图形移出表格并设为浮动，再通过定位对齐。
shape-outside 在 <table> 或表格单元格（<td>、<th>）里根本不会生效——表格布局会强制元素脱离普通文本流，而 shape-outside 只作用于参与文本流的浮动块级元素。
为什么表格里加了 shape-outside 完全没反应
不是语法错，是布局机制冲突。表格单元格默认是 display: table-cell，它既不接受 float（会被忽略），也不参与 CSS 浮动上下文，浏览器直接跳过 shape-outside 声明，DevTools 里显示为 “ignored”。
-
float: left在<td>上无效：表格模型会重置该声明，无法触发浮动流 -
shape-outside必须搭配有效浮动才能激活，而表格容器（<table>、<tr>、<td>）均不支持浮动传播 - 即使强行用
display: block覆盖table-cell，也会破坏表格结构，导致列宽塌陷或对齐错乱 - 文字内容若在同一个
<td>内，根本不在浮动元素的“后续兄弟流”中，自然无绕行路径可言
想让文字绕图形走，得把图形从表格里“摘出来”
真正可行的做法是：放弃在表格内部实现环绕，把异形图作为独立浮动元素放在表格外部，再靠定位或负边距视觉上“对齐”到目标单元格位置。
- 把
<img>或带shape-outside的<div>移到<table>元素之外，设float: left+ 明确width/height - 用
margin-left: -Xpx或transform: translateX(-Xpx)把它往左拉进表格可视区，对齐对应列 - 确保后续文字内容（比如紧邻表格的
<p>）在普通文档流中，且足够长——短段落看不出环绕效果 - 避免父容器有
overflow: hidden或contain: layout，否则浮动区域被裁剪，形状不可见
shape-outside: url() 在表格场景下更容易失效
哪怕你成功把图形抽出来浮动，url() 引用仍大概率失败，尤其当表格页面由框架（如 Vue/React）动态渲染时。
立即学习“前端免费学习笔记（深入）”；
- 本地双击打开（
file://）时，PNG 的 alpha 通道完全不解析，静默回退为矩形 - 表格常嵌套在
display: flex或overflow: hidden的 wrapper 中，直接切断浮动传播 - iOS Safari 对
shape-outside: url()支持极差，16.4+ 才支持path()，旧版连 warning 都不报 - 推荐改用内联 SVG：
shape-outside: url(#my-shape)+ 页面底部<svg><defs><path id="my-shape" d="..."></defs></svg>，规避 CORS 和协议限制
响应式表格里用 polygon() 坐标会严重偏移
表格列宽随视口变化，但 polygon() 坐标始终基于浮动元素自身尺寸计算——如果图形宽度从 300px 缩到 120px，50px 就变成 20px，顶点完全跑偏。
- 绝对单位（
px）只适合固定尺寸表格；Firefox 对小数敏感，全用整数（如10px，别写10.5px） - 百分比单位（
%）更稳妥，但必须确保图形宽高比稳定，否则缩放后点位失准 - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)——这还是矩形；要缺角，得手动缩点，例如右下角从100% 100%改成80% 80% - 调试必加两行：
outline: 1px solid red看浮动范围，background: rgba(0,0,0,0.1)叠半透背景验证描点是否贴合
表格本身是强约束布局，而 shape-outside 是弱流式排版机制——两者底层逻辑互斥。真要兼顾语义化表格和异形环绕，只能靠“视觉欺骗”：图形外置、流式文字环绕、定位归位。任何试图在 <td> 里直接写 shape-outside 的尝试，都会卡在浮动失效这第一关。
