从图像创建形状

要使用图像创建形状，该图像需要具有 alpha 通道，即不是完全不透明的区域。 shape-image-threshold 属性用于设置此不透明度的阈值。不透明度大于此值的像素将用于计算形状的区域。

在下面的示例中，有一个星星的图像，它有一个实心红色区域和一个完全透明的区域。图像文件的路径用作 shape-outside 属性的值。现在内容围绕星星形状环绕。

您可以使用 shape-margin 将文本移开形状，在创建的形状和文本周围留出边距。

从图像创建形状时会遇到的一件事是，您使用的图像必须 CORS 兼容。托管在与您的站点相同域上的图像应该可以工作，但是，如果您的图像托管在不同的域上，例如 CDN，您应该确保它们正在发送正确的标头以启用它们用于形状。由于此 CORS 兼容图像的要求，如果您在没有使用本地 Web 服务器的情况下在本地预览文件，则您的形状将无法正常工作。

DevTools 可以帮助您识别 CORS 错误。在 Chrome 中，控制台会提醒您 CORS 问题。在 Firefox 中，如果您检查属性，您将收到有关图像无法加载的提醒。这应该提醒您，由于 CORS，您的图像无法用作形状的来源。

shape-image-threshold 属性允许从不是完全透明的区域创建形状。如果 shape-image-threshold 的值为 0.0（这是初始值），则该区域必须完全透明。如果该值为 1.0，则它完全不透明。介于两者之间的值意味着您可以将半透明区域设置为定义区域。

在下面的示例中，我使用的是与初始示例类似的图像，但是，在此图像中，星星的背景不是完全透明的，它具有 20% 的不透明度，如我在图形程序中创建的那样。如果我将 shape-image-threshold 设置为 0.3，那么我会看到形状，如果我将其设置为小于 0.2 的值，我将看不到形状。

在上面的示例中，我既将图像用作 shape-outside 的值，也将其添加到页面中。许多演示都这样做，因为它有助于显示我们正在遵循的形状，但是，shape-outside 属性与页面上显示的图像无关，因此您不需要显示图像来使用图像创建形状。

您确实需要一些东西来浮动，但这可以是像下面示例中那样的一些生成的內容。我正在浮动生成的內容，并使用更大的星星图像来塑造我的內容，而无需在页面上显示任何图像。

由于CSS 渐变被视为图像，因此可以使用渐变通过将透明或半透明区域作为渐变的一部分来生成形状。

以下示例使用生成的内容。该内容已浮动，并为其设置了线性渐变的背景图像。我使用与shape-outside值相同的该值。线性渐变从紫色到透明。通过更改shape-image-threshold的值，您可以决定创建形状的像素需要透明到什么程度。您可以在下面的示例中尝试该值，以查看斜线如何根据该值在形状上移动。

您也可以尝试完全删除背景图像，从而仅使用渐变来创建形状，而不在页面上显示它。

以下示例使用带有椭圆的径向渐变，再次使用渐变的透明部分来创建形状。

您可以在这些实时示例中直接进行实验，以查看更改渐变如何改变形状的路径。