Tailwind中clip-path polygon写死坐标失效，因默认不解析函数值，须通过theme.extend.clipPath或@layer utilities显式注册；Safari需同时声明mask-image和-webkit-mask-image且仅支持base64 SVG；动态裁剪推荐内联SVG+CSS变量控制transform。

clip-path polygon在Tailwind中写死坐标为什么失效

直接写clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)能切矩形，但换成clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)却没反应——不是语法错，而是 Tailwind 默认不解析clip-path的函数值，clip-path-[polygon(...)]这种写法根本不会被编译进 CSS，浏览器看到的是空规则。

• 所有clip-path函数（polygon、circle、path）都必须通过theme.extend.clipPath或@layer utilities显式注册，不能靠任意值语法clip-path-[...] 自动生效
• 坐标里不能用 CSS 变量插值：clip-path: polygon(var(--x) var(--y), ...)会被浏览器静默丢弃，控制台无报错
• 响应式下百分比坐标（如50%）会随容器宽高变化，但若父元素有transform，clip-path的参考系可能偏移，需加transform-box: fill-box

mask-image URL在Safari中完全不显示的硬伤

mask-[url('./logo.svg')]在 Chrome 看着正常，Safari 里却一片空白——根本原因不是路径错，而是 Safari 拒绝未配对的mask-image：它只认同时存在且值完全一致的-webkit-mask-image和mask-image，缺一不可，且只接受 base64 编码的 SVG，不认相对路径或未编码的 data URL。

• 必须把 SVG 转成 base64（删掉 XML 声明、换行，fill全设为currentColor），再注入theme.extend.backgroundImage，例如：'icon-home': "url('data:image/svg+xml;base64,PHN2Zy...')"
• 使用时要同时写两个类：bg-icon-home mask-image-[url('data:image/svg+xml;base64,PHN2Zy...')] -webkit-mask-image-[url('data:image/svg+xml;base64,PHN2Zy...')]"，base64 字符串必须一字不差
• hover:mask-image-[...]只在注册后的静态类名上生效，mask-[url(...)]本身无法触发变体

动态裁剪用CSS变量控制SVG clipPath最稳

想让裁剪形状随鼠标移动或数据变化，硬编码polygon坐标维护成本爆炸；用clip-path: path()配合calc()虽可行，但仅限 Chromium 117+，且path()字符串内不能拼接变量——唯一生产级方案是下沉到内联 SVG 的<clippath>，用 CSS 自定义属性驱动 transform。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• <svg>放在 HTML 底部或display: none，避免布局干扰；给<clippath id="my-clip">设 ID
• CSS 中用clip-path: url(#my-clip)引用，再通过style="--tx: 20px; --ty: 10px"控制 SVG 内<clippath>的transform: translate(var(--tx), var(--ty))
• 波浪边等复杂路径，用<path d="M0,0 C20,10 40,-5 60,0" transform="scale(var(--amp), 1)">，振幅由--amp控制

mask-size和transition的坑比想象中多

写了mask-size-cover却发现高 DPI 屏幕上遮罩模糊，或者想用transition mask-image做淡入效果却毫无反应——这不是配置问题，是底层限制。

立即学习“前端免费学习笔记（深入）”；

• mask-size必须用mask-size-cover或mask-size-100%，写死像素值（如mask-size-24）会导致缩放失真，Retina 屏尤其明显
• mask-image本身不可 transition，但可以 transition mask-position 或底层background-position（如果遮罩基于渐变或平铺图）
• iOS Safari 对mask交互极度保守：hover 区域偏移、active 态一闪即逝，建议改用focus-within:或 JS 切换 class

实际项目里，最易被忽略的是 Safari 的双属性配对要求和 SVG 中currentColor的继承链——父元素没设text-white，遮罩就永远是默认黑色，跟背景融成一片。