如何通过CSS shape-outside实现文字环绕响应式不规则图形？-css教程-PHP中文网

shape-outside在响应式下不会自动适配，必须在每个断点中显式重写整个声明；其计算基准为元素当前盒模型且不随缩放更新，需同时满足float、display:block、明确宽高及父容器不触发bfc四个硬性条件，否则文字直接掉至图下。

如何通过css shape-outside实现文字环绕响应式不规则图形？

shape-outside 在响应式场景下不会自动适配，必须在每个断点中显式重写整个声明，否则文字大概率直接掉到图片正下方。

为什么小屏上文字突然不绕图了

这不是代码失效，是计算基准没更新。浏览器按当前元素盒模型算一次 shape-outside，之后缩放图片，circle(100px) 还是 100px，polygon(0 0, 100% 0, 100% 100%, 0 100%) 中的 100% 仍指原图宽高，不是视口或父容器尺寸。iOS Safari 可能直接显示 shape-outside: ignored，Chrome DevTools 里该属性被划掉——都是因为媒体查询只改了 width，没重写形状本身。

必须同时满足的四个硬性条件

缺一个，shape-outside 就等于没写：

- float: left 或 float: right（float: none、Flex/Grid 子项、未声明均无效）

- 元素不能是 display: inline；<img> 推荐加 display: block 避免底部留白干扰

- 必须有明确宽高：width + height，或用 aspect-ratio（Safari 15.4+ 支持）；仅靠 max-width: 100% 不够

- 父容器不能触发 BFC：overflow: hidden、contain: layout、display: flow-root、display: flex 都会截断浮动传播

polygon() 坐标单位与响应式写法

polygon() 所有点都基于该浮动元素自身宽高，不是父容器。混用单位或顺序错，形状就跑偏：

- 统一用 %：适合响应式，但需确保宽高比稳定（用 aspect-ratio 或 padding-bottom 技巧）

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

- 别写 polygon(0 0, 100% 0, 100% 100%, 0 100%)——这仍是矩形；要“缺角”，得把对应顶点往内缩，比如右下角从 100% 100% 改成 80% 80%

- 每个断点里必须重写整条声明，不能只改 width：

img {
  float: left;
  width: 300px;
  aspect-ratio: 4/3;
  shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
@media (max-width: 768px) {
  img {
    width: 200px;
    shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
  }
}
@media (max-width: 480px) {
  img {
    float: none;
    width: 100%;
    shape-outside: none;
  }
}