CSS ---clip-path:

介绍

clip-path是一个CSS属性，剪切路径，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。

属性值选项

clip-path的值可以是预定义形状、SVG路径或者一个URL。常用的值有：

• circle(): 创建一个圆形剪裁路径。

• ellipse(): 创建一个椭圆形剪裁路径。

• polygon(): 创建一个多边形剪裁路径。

• inset(): 创建一个矩形剪裁路径，可以指定四个边的值。

• path(): 使用SVG path值定义剪裁路径。

• url(): 使用SVG剪裁路径的链接。

圆形

<div class="content"></div>
.content{
  height:100px;
  width:100px;
  clip-path:circle(50% at 50% 50%)
}