从盒子值创建形状

上面列出的值对应于 CSS 盒模型的各个部分。CSS 中的框有内容、内边距、边框和外边距。

通过使用盒值来创建形状，我们可以将内容围绕这些值定义的边缘流动。在下面的每个示例中，我使用一个定义了内边距、边框和外边距的元素，这样您就可以看到内容流动的不同方式。

margin-box 是由外边距边缘定义的形状，包括形状的圆角，如果 border-radius 已被用于定义元素。

在下面的示例中，我们有一个圆形的紫色项目，它是一个 <div>，具有高度、宽度和背景颜色。border-radius 属性已通过设置 border-radius: 50% 来创建圆形。由于该元素有外边距，您可以看到内容围绕圆形形状及其外边距流动。

border-box 值是由外边框边缘定义的形状。此形状遵循边框外部的所有正常圆角塑形规则。即使您没有使用 CSS border 属性，您仍然有边框。在这种情况下，它将与 padding-box 相同，即由外内边距边缘定义的形状。

在下面的示例中，您可以看到文本现在是如何遵循边框创建的线的。更改边框大小，内容将随之变化。

padding-box 值定义了由外内边距边缘包围的形状。此形状遵循边框内部的所有正常圆角塑形规则。如果您没有内边距，则 padding-box 与 content-box 相同。

content-box 值定义了外层内容边缘所包围的形状。此框的每个角半径等于 border-radius 减去 border-width 和 padding，或 0，以较大者为准。这意味着这里不可能有负值。

使用框值是一种创建形状的简单方法；但是，从本质上讲，这只能适用于可以使用受支持良好的 border-radius 属性定义的非常简单的形状。上面显示的示例展示了其中一个用例。您可以使用 border-radius 创建一个圆形形状，然后将文本弯曲到圆形周围。

仅仅使用这种基本技术，就可以创建一些有趣的效果。在本节的最后一个示例中，我将两个元素分别浮动到左侧和右侧，并为每个元素在最靠近文本的方向设置 100% 的边框半径。

对于更复杂的形状，您需要使用其中一个 基本形状 作为值，或者像本节其他指南中所述那样从图像定义形状。