在CSS布局中实现文字环绕图片效果时，传统的float属性只能让文字围绕图片的矩形边框排列，当图片是不规则形状或者需要自定义环绕轮廓时，就需要用到shape-outside属性。该属性可以指定浮动元素的浮动区域形状，让周围的内容沿着这个形状的边缘排列，打破矩形环绕的限制。
shape-outside属性基础说明
shape-outside是CSS Shapes模块中的核心属性，仅对浮动元素生效，用来定义元素周围内容可以环绕的形状区域。它的默认值是none，表示使用元素的矩形边框作为环绕边界，设置其他值后可以自定义形状。
使用shape-outside属性时，通常需要配合以下属性一起使用：
float：必须设置，元素需要处于浮动状态属性才会生效width和height：需要为浮动元素设置明确的尺寸，否则无法计算形状范围shape-margin：可选，用来设置形状边缘到环绕内容的额外间距shape-image-threshold：可选，当使用图像定义形状时，用来指定图像的透明度阈值，低于该阈值的像素不参与形状计算
shape-outside支持的常用形状值
1. 基础几何形状
shape-outside支持直接定义基础的几何形状，包括圆形、椭圆形、多边形和矩形，语法和CSS的clip-path属性类似。
圆形语法为circle(半径 at 圆心X坐标 圆心Y坐标)，示例代码如下：
/* 定义一个半径为100px的圆形浮动区域，圆心在元素中心 */
.img-wrap {
float: left;
width: 200px;
height: 200px;
background: #f0f0f0;
shape-outside: circle(100px at 100px 100px);
shape-margin: 10px;
}
椭圆形语法为ellipse(水平半径 垂直半径 at 圆心X坐标 圆心Y坐标)，多边形语法为polygon(点1X 点1Y, 点2X 点2Y, ...)，矩形语法为inset(上 右 下 左 round 圆角半径)。
2. 基于图像的形状
shape-outside可以直接引用图像来定义形状，此时会使用图像的alpha通道（透明度）来计算形状区域，语法为url(图像地址)。示例代码如下：
/* 使用图像定义环绕形状，透明度低于0.5的区域不参与计算 */
.shape-img {
float: left;
width: 300px;
height: 200px;
background: url("https://ipipp.com/demo-shape.png") no-repeat;
shape-outside: url("https://ipipp.com/demo-shape.png");
shape-image-threshold: 0.5;
shape-margin: 15px;
}
3. 基于盒模型的形状
shape-outside还可以使用元素的盒模型区域作为形状，可选值包括margin-box、border-box、padding-box、content-box，分别对应元素的margin、border、padding、content区域。
完整文字环绕图片示例
下面是一个使用shape-outside实现圆形图片文字环绕的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字环绕图片示例</title>
<style>
.container {
width: 800px;
margin: 0 auto;
line-height: 1.6;
font-size: 16px;
}
.circle-img {
float: left;
width: 200px;
height: 200px;
border-radius: 50%; /* 图片本身裁剪成圆形 */
background: #4a90e2;
shape-outside: circle(100px at 100px 100px); /* 定义圆形环绕区域 */
shape-margin: 20px; /* 环绕内容和形状的间距 */
}
</style>
</head>
<body>
<div class="container">
<div class="circle-img"></div>
<p>这是一段测试文字，用来展示文字环绕圆形图片的效果。当设置shape-outside属性为圆形后，文字不会再沿着图片的矩形边框排列，而是会沿着圆形的边缘环绕，整体布局会更加美观自然。</p>
<p>更多测试文字内容，可以看到文字和圆形图片之间保持了设置的间距，排列效果更加符合设计需求。该属性在现代浏览器中支持度较好，实际项目中可以放心使用。</p>
</div>
</body>
</html>
使用注意事项
- shape-outside仅对浮动元素生效，非浮动元素设置该属性不会有任何效果
- 部分旧版本浏览器可能不支持该属性，使用前可以查询兼容性情况，必要时添加降级处理
- 当使用图像定义形状时，图像需要和页面同源，或者服务器配置了对应的跨域头，否则形状可能无法正常计算
- shape-outside定义的是内容环绕的形状，不会改变元素本身的渲染形状，如果需要元素本身也呈现对应形状，需要配合
clip-path属性使用
注意：shape-outside属性不会影响其他浮动元素的排列，只会影响行内内容的环绕方式，这一点和传统的浮动元素影响其他元素排列的行为不同。
CSSshape-outside文字环绕图片前端布局修改时间：2026-06-19 05:51:33