CSS 的图形（Shape）概览

CSS Shapes Level 1 Specification 在 CSS 中描述了几何图形的 shape（以下叫做形状）。在“Level 1 of the specification”中定义的形状被设计用来绘制浮动的元素。这篇文章提供关于“你能如何绘制这些形状”的概览。

举个例子：你在左侧设计一个浮动元素，它可以令文本环绕于该浮动元素的右侧和底部，并且以一种矩形的样式。如果你接着指定一个圆形的样式，文本就会以圆形的样式环绕。.

事实上，我们有多种方式去创建这类形状，并且我们在指导中将会发现 CSS 形状是怎么工作的，然后就可以跟着感觉走了。

Specification 定义了什么？

Specification 定义了三种新的权限：

shape-outside — 允许定义基本形状。
shape-image-threshold — 设定一个渗出阈值。如果一幅图像被用于定义形状，那么只有在大于等于渗出阈值的部分才会显示，其他部分不会显示出来。.
shape-margin — 在形状外面加上边框。

shape-outside 权限允许定义一个形状，它需要很多参数共同定义而成，这些参数被定义在 <basic-shape> 数据类型中。下面是一个小例子。

下面的例子中，左侧有一幅浮动的图像，然后使用shape-outside 权限定义一个circle(50%)属性。结果为文字环绕于图像，并且图像不显示为矩形，而显示为圆形。

正如这个级别的元素必须被浮动化才能适用<basic-shape> 一样，有时候在创建依赖时就会发生副作用。如果在浏览器中不支持形状，那么用户就会看到文本围绕在矩形的图片周围。有了形状支持之后，视觉效果就增强了。

circle(50%) 属性是一个基本形状的例子。它定义了四个 <basic-shape> 函数，分别是：

使用 inset() 修饰文本围绕效果时，你还可以增加偏移量，否则就会出现文本过于接近目标对象的情况。

我们已经看到了 circle() 如何创建圆形形状。 ellipse() 则用来创建椭圆形形状。如果还有特殊要求，使用 polygon() 可以创建任意难度的形状。

在我们的 Guide to Basic Shapes 中，我们探索每一种形状，并且学会如何创建它们。

形状可以加上 Box 参数，因此你可以创建形状在：

当中。

在下面的例子中你可以改变 border-box 参数，然后查看形状靠近或者远离 Box 的效果。

有意思的是，可以使用带有 Alpha 通道的图像来创建（形状的）路径——文本将会围绕不透明的图像部分。这个特性允许文本覆盖图像，有时候可以将文本围绕于一幅不可见的图像，达到一种多边形文本显示的效果。

需要注意的是，这种方式必须是 CORS compatible 的，否则 shape-outside 相当于 none ，你将不会得到任何形状。

在下面的例子中，我们有一幅全透明的图像，使用如下 URL，并且指定 shape-outside. 属性，创建出一个模糊的形状：一幅气球图像。

shape-image-threshold 属性用于设定图像透明度的阈值并用来创建形状。如果shape-image-threshold 是 0.0 (缺省值) ，那么图像必须是全透明的。如果是 1.0 那么图像必须是模糊的。中间的值就代表了区分图像哪部分透明的阈值，以创建形状。

如果我们使用图像来创建形状，那么你可以看到阈值在起作用。在这么多例子中，如果你改变了阈值大小，形状会随之变化。

下面我们进入更深层次的Shapes from Images学习。