CSS 形状

CSS 形状模块描述了几何形状。它还定义了可以使用这些形状来控制元素浮动区域几何形状的 CSS 属性;这个区域可以应用于排除,或者指定元素的 content 区域。

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

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

CSS 形状实战

下面的示例显示了一张左浮动的图片,并应用了 shape-outside 属性,其值为 circle(50%)。这会创建一个圆形形状,内容现在会围绕该形状进行环绕。这改变了环绕文本行框的长度。您可以点击“播放”在 MDN Playground 中编辑代码。

参考

属性

CSS 形状模块还引入了 shape-insideshape-padding 属性。目前,没有浏览器支持这些特性。

数据类型

函数

术语

指南

形状概述

使用 shape-marginclip-path 属性定义基本形状,并使用开发者工具调试基本形状。

来自盒模型值的形状

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

使用 shape-outside 的基本形状

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

基于图像的形状

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

CSS 运动路径模块

CSS 遮罩模块

CSS 背景与边框模块

CSS 盒模型模块

规范

规范
CSS Shapes Module Level 1
CSS 形状模块级别 2

另见