怎么用CSS shape-outside属性实现文字环绕不规则图形-css教程-PHP中文网

shape-outside本身不触发浮动，仅定义已浮动元素的文字环绕路径；必须同时满足float:left/right、块级替换元素、明确宽高三个条件，缺一则被浏览器静默忽略，devtools中显示为划掉或none。

怎么用css shape-outside属性实现文字环绕不规则图形

shape-outside 本身不绕文字，它只告诉浏览器“文字该绕着哪条线走”——但前提是元素必须 float，否则整条声明被忽略。

不是语法错，是布局前提断了。浏览器直接跳过该属性，DevTools 里显示为划掉或 none。

float 没显式写：float: left 或 float: right 缺一不可；float: none、未声明、靠继承或父级设置 = 无效
元素仍是 display: inline：<img> 默认如此，底部有基线留白，务必加 display: block
宽高未定：仅靠 max-width: 100% 或 aspect-ratio（Safari 15.4+ 支持）不够稳；width 和 height 必须同时存在，或用 aspect-ratio + 明确 width
父容器截断浮动传播：overflow: hidden、contain: layout、display: flex 或 display: grid 会创建新 BFC，形状“不可见”

坐标系以该浮动元素自身左上角为原点，单位基于自身宽高——不是父容器，也不是视口。

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

下载

单位必须统一：% 相对自身尺寸，px 是绝对像素；混用（如 50% 20px）必错位
polygon(0 0, 100% 0, 100% 100%, 0 100%) 还是矩形；要“缺角”，得把对应点往里缩，比如右下角从 100% 100% 改成 80% 80%
所有点必须顺时针或逆时针闭合；漏一个点、首尾重复、顺序乱，路径就不可预测
调试必加：outline: 1px solid red 看盒模型真实范围，再叠一层 background: rgba(0,0,0,0.1) 验证描点是否贴合

静默降级，不报错也不提示，最常见于本地开发或跨域场景。

file:// 协议下全失效：Chrome/Firefox/Safari 均不解析 PNG alpha 通道；必须部署到 HTTP 服务（如 python3 -m http.server）
跨域图片缺 CORS 头：服务端需返回 Access-Control-Allow-Origin: *，否则降级
PNG 无有效 alpha 通道：导出时选“保留透明度”，用 Figma/GIMP 检查 Alpha 是否真为 0；半透噪点会导致绕行锯齿
优先改用内联 SVG：shape-outside: url(#my-path) + 页面底部 <svg><defs><path id="my-path" d="M..."></path></defs></svg>，100% 可控且无跨域问题

图片缩放后，polygon(20px 50px, 180px 50px) 这类 px 值完全跑偏，因为它们不随缩放变化。

放弃纯 px，全部改用 %：坐标基于图片自身宽高，只要宽高比稳定（靠 aspect-ratio 或固定 width/height），就能自适应
媒体查询中必须重写整个 shape-outside 声明：不能只改 width 就指望浏览器自动推导新路径；@media (max-width: 480px) { img { shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); } }
iOS Safari 直到 16.4 才支持 shape-outside: path()；旧版（如企业内网常见 iOS 15.x）会静默忽略，应主动降级为 ellipse() 或 circle()