shape-outside 不能作用于 元素，因其非浮动且计算显示类型为 table，不满足 css shapes 对块级或内联级盒的要求；可行方案是用 div 容器设置 shape-outside 并嵌套表格。

shape-outside 不能作用于 <table> 元素——这是最直接的结论。浏览器目前不支持对 <code><table>、<code><tr>、<code><td> 等表格元素应用 <code>shape-outside，因为它们默认不是浮动元素，且不符合 CSS Shapes 规范中对“可设置形状的浮动盒”的要求。

为什么 shape-outside 对表格无效

CSS Shapes 要求目标元素必须同时满足两个前提：

• 设置了 float（非 none）
• 是“块级盒”或“内联级盒”，但 <table> 的计算显示类型是 <code>table，不属于 CSS Shapes 支持的盒类型（如 block、inline-block、flex 等）
• 即使强行加 display: block 和 float: left，多数浏览器仍忽略 shape-outside，控制台也不会报错，只是静默失效

替代方案：用 <div> 模拟圆形容器 + 表格内容 <p>实际可行的做法是把表格内容放进一个支持 <code>shape-outside 的容器里，例如 <div>： <ul><li>给 <code><div> 设置 <code>float: left、width/height、border-radius: 50%

再用 shape-outside: circle(50% at 50% 50%) 定义环绕路径

内部嵌套 <table>，并设 <code>width: 100%、height: 100% 保持尺寸一致

注意：文字环绕的是 <div> 的形状，不是表格本身；表格只是视觉内容载体 <p>示例关键样式：</p> <pre class="brush:php;toolbar:false;">div.table-circle { float: left; width: 200px; height: 200px; border-radius: 50%; shape-outside: circle(50% at 50% 50%); margin-right: 1rem; } div.table-circle table { width: 100%; height: 100%; border-collapse: collapse; }</pre> <h3>文字环绕效果不稳定？检查这些点</h3> <p>即使用了正确容器，环绕仍可能出问题：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>shape-outside 只影响**后续的行内内容**（如段落文本），对其他浮动元素或绝对定位元素无效

确保文字内容是普通流内 <p></p> 或 <span></span>，不是被 overflow: hidden 或 contain: layout 截断的父容器内部

Chrome 和 Safari 支持较好，Firefox 对 shape-outside 的 circle() 支持完整，但旧版 Edge 已废弃，无需兼容

如果圆形区域有背景色或边框，记得加 background 或 border，否则只“绕空”，看不出形状

真正要实现文字绕圆排版，核心不是“让表格变形状”，而是“用形状容器包裹表格”。表格本身永远是矩形盒，这是 HTML 语义和渲染引擎决定的，绕不开。