如何在CSS中实现圆形图片周围文本环绕浮动？-css教程-PHP中文网

必须用 float，否则 shape-outside 无效；需同时设置 float、显式宽高、border-radius，并确保 dom 顺序正确，circle() 半径依赖明确尺寸，老浏览器自动回退至矩形浮动。

如何在css中实现圆形图片周围文本环绕浮动？

必须用 `float`，否则 `shape-outside` 完全无效

很多人加了 shape-outside: circle() 却没效果，根本原因是没配 float。CSS Shapes 规范明确要求：只有浮动元素（float: left 或 float: right）才能触发文字环绕逻辑，其他定位方式（position: absolute、display: inline-block 等）都不行。

常见错误现象：

shape-outside 声明存在但 DevTools 中该属性被划掉（strikethrough）
图片正常显示，但文字仍按矩形区域排版，无视圆形轮廓

正确做法：

给图片同时设置 float: left 和 width/height（显式尺寸必不可少）
确保图片是块级元素（display: block 推荐）
DOM 顺序必须是图片在前、段落在后，否则环绕不触发

`shape-outside: circle()` 的半径参数怎么写才对

circle() 不是“自动识别图片尺寸”，它需要你明确告诉浏览器圆心在哪、半径多大。默认行为是 circle(50%)，即以盒模型中心为圆心、宽高较小值的一半为半径——但前提是盒子有明确 width 和 height。

容易踩的坑：

只设 width: 200px 没设 height，50% 就算不出来，shape-outside 退化为无效
用 circle(100px) 但图片实际宽高不足 200px，圆会溢出或被裁剪
忘记配合 border-radius: 50% ——图片本身还是方形，只是文字绕圆走，视觉上很割裂

推荐写法：

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

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

下载

img.circle-wrap {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  shape-margin: 12px;
}

旧浏览器 fallback 必须靠纯 CSS，别碰 JavaScript

Safari 15.4 之前不支持 path()，IE 完全不支持 shape-outside。但降级不是难题：因为浮动本身就有矩形环绕效果，shape-outside 只是“增强”，不是“必需”。只要不写破坏性样式，老浏览器自然回退到传统浮动排版。

关键点：

不要用 @supports (shape-outside: circle()) 包裹整个浮动规则——这会让老浏览器完全不浮动
把 float 和尺寸写在前面，shape-outside 单独追加即可
如果想让老浏览器里图片边缘更柔和，可加 clip-path: circle(50%)，但它不影响文字流，仅视觉修饰

兼容写法示例：

img.circle-wrap {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
img.circle-wrap {
  shape-outside: circle(50%);
  shape-margin: 12px;
}