CSS 形状

CSS 形状（CSS shape）模块用于描述几何形状。它还定义了 CSS 属性，以使用这些形状来控制元素浮动区域；区域可被用于排除或指定元素的内容区域。

规范定义了几种创建形状的方法。内容可以包裹形状或在形状内而不是遵循元素盒子的默认矩形形状。

形状模块定义了可以用作 CSS 值的几何形状。该模块提供了用于创建椭圆、多边形和任意几何形状的函数。其他 CSS 模块可以使用该规范定义的形状，包括 CSS 运动路径和 CSS 遮盖。

CSS 形状实例

以下示例显示了一个向左浮动的图像，并应用了值为 circle(50%) 的 shape-outside 属性。这将创建一个圆形，使得包裹浮动的内容会包裹着这个形状。这将改变包裹文本的行框的长度。

参考

属性

备注：CSS 形状模块引入了尚未实现的 shape-inside 和 shape-padding 属性。

数据类型

函数

术语

指南

形状概览

定义使用 shape-margin 和 clip-path 属性的基本形状，并使用开发者工具调试基本形状。

使用 box 值指定形状

使用 border-radius 圆角和 CSS 盒子模型的值创建形状。

使用 shape-outside 的基本形状

使用 CSS 形状、参考框和 shape-outside 属性创建矩形、圆形、椭圆形和多边形。

来自图像的形状

根据半透明图像文件和 CSS 渐变创建形状。

相关概念

CSS 运动路径模块

CSS 遮盖模块

CSS 背景和边框模块

CSS 盒子模型模块

规范

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

参见