重新审视 CSS 形状

Desknumber

在本文中，我们将了解 CSS 形状以及如何使用图像、渐变和基本形状创建非矩形形状。我们还发现 Firefox 中的新工具如何使编辑形状变得更加容易。

CSS Shapes Level 1 已经在 Chrome 和 Safari 中提供 电子邮件营销列表 多年了，然而，本周随着 Firefox 62 的发布，它在 Firefox 的生产版本中发布 - 以及 Firefox DevTools 中的一个非常好的附加功能来帮助我们工作与形状。在本文中，我将介绍一些可以使用 CSS 形状执行的操作。也许是时候考虑在您的设计中添加一些曲线了？

CSS 形状是什么？
CSS Shapes 规范 Level 1 定义了三个新属性：



shape-margin该规范的目的是允许内容围绕非矩形形状流动，这在我们的四四方方的网络上非常不寻常。创建形状有几种不同的方法，我们将在本教程中介绍。我们还将了解 Firefox 中提供的形状路径编辑器，因为它可以帮助您轻松理解页面上的形状并使用它们。

在当前规范中，形状只能应用于浮动，因此任何形状示例都需要从浮动元素开始。在下面的示例中，我有一个具有透明背景的 PNG 图像，其中我将图像向左浮动。图像后面的文本现在围绕图像的右侧和底部流动。

我希望发生的是我的内容遵循图像不透明部分的形状，而不是遵循物理图像文件的线条。为此，我使用该shape-outside属性，其值为图像的 URL。我正在使用实际的图像文件来创建内容流动的路径。