CSS 形状编辑器

Firefox 62 将于 9 月 5 日发布 beta 版。对于 CSS 开发人员来说，最值得注意的是它现在将支持 shape-outside 属性，使用 polygon()、circle() 和 ellipse()，加入 Chrome 和 Safari 的行列。

Firefox 版本的优点（如果您使用的是 Firefox 开发者版，它已经处于 62 版本，那么这已经很不错了）是它在 DevTools 中内置了形状编辑器。

Chrome 也支持 shape-outside，但没有用于处理它们的原生 DevTools 助手。值得庆幸的是，Razvan Caliman 有一个 Chrome 插件，它做得很好。（据我所知，Razvan 也为 Firefox 版本做出了贡献。）

我喜欢使用 shape-outside，因为它可以为页面增添真正的视觉趣味，而且这种方式还不算过时或过流行。此外，在很多情况下，它是否受支持并不重要，因为浮动表现为矩形。如果它会导致重大问题，您可以将内容包装在 @supports 块中并进行其他操作。

@supports (shape-outside: circle(50%)) {
  img {
    /* Only round the image if we can float around it too, otherwise leave it square. */
    shape-outside: circle(50%);
    border-radius: 50%;
  }
}

不过，我对 Firefox DevTools 和 Chrome 插件都有一些意见…

• 我希望可以更轻松地添加新的 shape-outside 到现有元素。您可以做到，但必须手动添加类似 shape-outside: polygon(0 0, 10px 0, 20px 0); 的内容到元素以启动工具，然后才能开始使用它。
• 我希望它们默认使用 % 而不是 px 单位。

尤其是第二个。如今我们经常使用灵活的尺寸来调整内容的大小，因此硬像素值有时毫无用处，而且很难转换为灵活的百分比。

您最好还是从 Bennett Feely 的 Clippy 开始（它技术上是为 clip-path 设计的，但它包含 polygon()，可以用于两者。它使用百分比，所以很棒，从那里开始就可以了。

“使用 CSS 形状和 CSS 排除的挫败感”

这是 Ben Frain 最近 发布的博客文章，它对所有这些内容都有一些不错的观点。一个关键点是，使用 shape-outside 并不一定意味着您要剪切背景。就我个人而言，我发现我是在透明背景上剪切形状，但我理解这一点。

另一个重要问题是还没有 shape-inside() 属性 (还没有)，所以如果您希望将文本放在形状内部而不是让它环绕形状外部，那么现在还不行。