路径、形状、剪裁和遮罩

HTML 渲染基于盒子模型构建，但生活（和网页设计）不仅仅是矩形。CSS 支持多种方式来更改元素的渲染区域，让开发者可以自由创建支持各种形状和尺寸的设计。裁剪允许使用几何形状，而遮罩会影响像素级的可见性。

路径和形状

CSS 使用函数来定义形状。我们在 CSS 函数模块中介绍了有关函数的一般信息。在本部分中，您将学习如何在 CSS 中创建形状。以下所有示例都使用您通过 clip-path 属性创建的形状，这会将可见区域缩小到仅包含形状内部的区域。这样，元素在视觉上就可以与元素的框有所不同。稍后我们会更详细地介绍剪辑。

在 CSS 中定义的形状可以是基本形状（例如圆形、矩形和多边形），也可以是路径（可用于定义复杂形状和复合形状）。

基本形状

circle()和ellipse()

circle() 和 ellipse() 函数用于定义半径相对于元素的圆形和椭圆形。circle() 函数接受单个大小或百分比作为实参。默认情况下，这两个函数都会将形状定位在元素的中心。两者都接受 at 关键字后面的可选位置，该位置可以表示为长度、百分比或位置关键字。

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}