如何在CSS中利用shape-outside实现环绕不规则盒模型的文字？-css教程-PHP中文网

shape-outside对普通div默认无效，因其仅作用于浮动元素（float:left/right），且要求元素为块级、具明确尺寸与可见背景或图片，否则浏览器忽略该声明。

如何在css中利用shape-outside实现环绕不规则盒模型的文字？

shape-outside 为什么对普通 div 默认无效？

直接给 div 设置 shape-outside 不会生效，因为该属性只对浮动元素（float: left 或 float: right）起作用，且要求元素本身是块级、有明确尺寸和背景（或图片）的容器。纯空 div 或未设置 float 的元素，浏览器直接忽略该声明。

必须搭配 float 使用，缺一不可
元素需有实际内容、背景色或 clip-path 可见轮廓，否则形状不可见也不参与排版
shape-outside 影响的是**周边文字流**，不是自身内容；它定义的是文字绕行的“外边界”，不是裁剪自身

用 image/svg 实现可靠不规则环绕的实操要点

最稳定的方式是用带透明通道的 PNG 或内联 SVG 作为浮动元素的背景，再通过 shape-outside: url(...) 引用其 alpha 通道生成形状。浏览器会自动将透明像素视为“可绕行区域”。

PNG 必须保存为带 Alpha 通道（非 GIF），且关键轮廓边缘无半透明噪点，否则绕行锯齿明显
SVG 内联时推荐用 shape-outside: url(#my-polygon) 指向 <defs><polygon id="my-polygon" points="..."></polygon></defs>，避免跨域或加载失败
务必设置 width 和 height，否则浮动元素塌陷，文字直接从上方穿过

示例片段：

 <div class="float-shape"></div>
<p>这段文字会绕着浮动图形排列……</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<p><style>
.float-shape {
float: left;
width: 200px;
height: 180px;
background: url(leaf.png) no-repeat center;
shape-outside: url(leaf.png); /<em> 浏览器读取 alpha 通道 /
margin-right: 1em;
}
</style></p>