CSS 形狀

CSS 形状 模块描述了几何形状。它还定义了可以利用形状来控制元素浮动区域几何形状的 CSS 属性；该区域可以应用于排除，或者指定元素的内容区域。

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

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

CSS 形狀實例

下面的示例显示了一个向左浮动的图像，并使用 circle(50%) 值应用了 shape-outside 属性。这将创建一个圆形形状，现在围绕浮动的包裹内容将围绕该形状包裹。这将改变包裹文本的行盒长度。

參考

屬性

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

数据类型

函数

术语

指南

形状概述

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

来自盒子值的形状

使用 border-radius 曲率和 CSS 盒子模型值创建形状。

使用 shape-outside 的基本形状

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

来自图像的形状

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

CSS 运动路径 模块

CSS 遮罩 模块

CSS 背景和边框 模块

CSS 盒子模型 模块

規範

规范
CSS 形状模块 1 级
CSS 形状模块 2 级

另請參閱