在网页排版中，让文字围绕圆形图像或色块排列是一种提升视觉效果的常用手法。通过CSS的shape-outside属性，我们可以脱离传统的矩形环绕，实现真正的圆形文字环绕布局。
实现原理
核心思路是创建一个浮动（float）的圆形div，并利用shape-outside告诉浏览器浮动区域的真实形状。文字流会识别这个形状并沿其边缘排列。
必备条件
- 元素必须设置浮动（left或right）
- 元素需要有明确的尺寸
- 使用shape-outside定义形状，如circle()
基础代码示例
下面是一个让文字环绕左浮动圆形div的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字环绕圆形div</title>
<style>
.circle {
float: left; /* 必须浮动 */
width: 160px; /* 圆形直径 */
height: 160px;
border-radius: 50%; /* 视觉上的圆 */
background: #6cf;
shape-outside: circle(); /* 定义文字环绕形状 */
margin-right: 16px;
}
.text {
line-height: 1.8;
}
</style>
</head>
<body>
<div class="circle"></div>
<p class="text">
这是一段示例文字，用来展示如何优雅地环绕在圆形div周围。通过shape-outside属性，
浏览器不再使用元素的矩形边框来排布文字，而是依据我们指定的圆形区域，让文本
沿着圆弧自然流动，从而获得更自由的版式效果。
</p>
</body>
</html>
使用shape-outside函数
shape-outside支持多种函数，最常用的是circle()。我们还可以用circle(50% at 50% 50%)明确圆心与半径。
常用形状函数
| 函数 | 说明 |
|---|---|
| circle() | 定义一个圆形浮动区域 |
| ellipse() | 定义一个椭圆形浮动区域 |
| polygon() | 通过坐标点定义任意多边形区域 |
注意事项
如果圆形div没有设置浮动，shape-outside将不会生效。另外在旧版浏览器中可能需要添加前缀或采用降级方案，比如用传统的margin模拟近似环绕。
优雅的环绕布局关键在于把视觉形状与排版形状统一起来，shape-outside正是连接这两者的桥梁。
小结
将文字优雅地环绕在圆形div内，只需浮动元素加shape-outside: circle()即可。这种方式纯CSS实现、语义清晰，适用于头像混排、特色引述等场景。
CSSshape-outsidefloat修改时间：2026-07-25 20:21:10