CSS | 形状边缘属性

CSS形状边缘属性（Shape Outside）可以让我们定义一个非矩形的形状边界，让文字和其他内容紧贴边缘而不是在一个矩形盒子中。

shape-outside

属性值 shape-outside 的设置方式跟其他 CSS 属性有些不同。通常我们像这样设置属性：

.some-element {
  property: value;
}

而在设置 shape-outside 时，需要配合 shape-outside-source、shape-outside-threshold、shape-outside-mode 三个子属性来完成。例如：

.some-element {
  shape-outside: url(shape.svg) content-box;
  shape-image-threshold: 0.5;
  shape-outside-mode: margin-box;
}

我们会在下面对这三个子属性进行讲解。

shape-outside-source

shape-outside-source 定义的是外形的来源，我们可以使用以下值：

• none：不使用任何外形
• <basic-shape>：使用基础图形来构成外形
• <url>：使用外部资源文件作为外形

其中，基础图形包括：

• circle()
• ellipse()
• inset()
• polygon()

举个例子，在 inner div 上定义一个圆形的形状边界：

.inner {
  shape-outside: circle(50%);
}

shape-outside-threshold

shape-outside-threshold 设定识别外形边缘的颜色阈值（Alpha）。默认值为 0，表示完全透明的地方不算在外形的计算内，取值范围为（0 至 1）的浮点数。

.inner {
  shape-outside: url(shape.svg);
  shape-image-threshold: 0.5;
}

shape-outside-mode

shape-outside-mode 定义的是外形的覆盖范围，默认值为 content-box。我们可以使用下面的值：

• content-box：外形只覆盖 content 区域，文字不会覆盖到外形范围内。
• padding-box：外形覆盖 content 和 padding 区域。
• margin-box：外形会覆盖到 margin 区域。

CSS 例子

假设我们有一个带阴影的按钮，如下图所示：

我们可以使用 border-radius 实现按钮的圆角效果，再使用 box-shadow 添加阴影；然后，使用以下 CSS 让阴影与文字不重叠，创造出非矩形形状：

button {
  background-color: lightcoral;
  border-radius: 25px;
  box-shadow: 10px 10px 10px grey;
  color: white;
  padding: 10px;
  margin-right: 20px;
  /* 这里使用到了 shape-outside 属性 */
  shape-outside: circle(50%);
  float: left;
}

效果如下：

这个按钮的形状已经不再是矩形了，阴影与文字也完美地配合在一起。

参考文献

MDN - shape-outside