在接下来的内容中，来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。
CSS中的基本图形
在CSS中polygon()、circle()、ellipse()和inset()函数可以绘制基本形状。在CSS中的offset-path和shape-outside中都可以使用这四个图形函数，实现对应的路径动画以及文本围绕排版效果。他们虽然绘制基本形状，但也常将其称之为路径图形。那么什么是路径呢？
什么是路径？
使用过SVG的同学对路径这个词并不会感到陌生，在SVG中有一个使用过SVG的同学对路径这个词并不会感到陌生，在SVG中有一个<path>
在CSS中可以通过path()来实现类似上面绘制图形的效果：
path("M 25,100 C 25,150 75,150 75,100 S 100,25 150,75");属性中的图形
如果你前面有接触过clip-path或者shape-outside话知道。虽然这里面用到类似像circle()和polygon()的图形，但令人奇怪的是，使用的并不是像SVG中的
看上去有些混乱，但我们可以慢慢将这些理一理，能帮助你更好的理解CSS中的形状和路径。
clip-path可以使用基本形状但不能使用path()
在CSS的clip-path属性中可以使用CSS的基本图形（polygon()、circle()、ellipse()和inset()）但不能使用path()。比如，我们在项目中需要使用不规则的用户头像，那么我们可以通过clip-path来完成。比如：
.avatar {
clip-path: polygon(0% 5%, 100% 0%, 100% 85%, 65% 80%, 75% 100%, 40% 80%, 0% 75%);
}你能看到类似下图的效果：
但是，如果你想要用户的头像实现像下图这样形状的效果：
对于上图这样的形状，使用基本的图形形状函数是没办法实现的，但在clip-path中又没有办法使用path()函数。不过值得庆幸的是，在clip-path中可以通过url()传一个带有ID属性名的
而
bubble-path
特别注意：在clipPath中需要指定一个明确的ID属性值，比如这里指定了id="clip"，另外为了让SVG元素不显示，不占空间，给
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}这个时候再通过clip-path的url()将SVG绘制的路径图形，运用到用户头像中：
.avatar {
width: 100px;
height: 100px;
margin-right: 2rem;
clip-path: url(#clip);
}此时你将看到的效果如下图所示：
offset-path可以使用path()但不能使用基本形状
offset-path早期称为motion-path。只是后来规范将其改变offset-path，而它主要用来制作路径动画效果，用来指定动画的行动路径。比如下面这个效果：
动画中的小圆球行动的路径，就是通过path()来完成的：
path("M100.5,39.47C100.5,58.3,83.36,74,60.58,77.64l16.85,19.9L33.94,76.25C14.47,70.92.5,56.47.5,39.47c0-21.52,22.39-39,50-39S100.5,17.95,100.5,39.47Z");具体的代码如下：
.move-me {
offset-path: path("M100.5,39.47C100.5,58.3,83.36,74,60.58,77.64l16.85,19.9L33.94,76.25C14.47,70.92.5,56.47.5,39.47c0-21.52,22.39-39,50-39S100.5,17.95,100.5,39.47Z");
animation: move 3s linear infinite;
}
@keyframes move {
100% {
motion-offset: 100%;
}
}同样的有一个问题，如果你想让小球按一个圆形来运动，你可能会想到像circle(50% at 50% 50%)来绘制的图形路径，但不幸的是，没有效果。那是因为offset-path并不支持circle()函数绘制的路径。不过值得庆幸的是，同样可以使用path()来会制一个圆形：
offset-path: path("M100,50a50,50,0,1,1-50-50A50,50,0,0,1,100,50Z");除此之外，还可以使用复合动画来模拟一个圆形动画效果。在@Lea Verou的《CSS Secrets》一书中就有一节专门介绍使用其它方法来实现圆形的路径动效。
其中原理很简单，简单用下图就能阐述：
shape-outside可以使用基本图形，但不支持path()
shape-outside和clip-path类似，在其属性值中只能使用CSS的基本图形函数，但不能使用path()函数绘制的图形。
shape-outside是能让文本围绕不同形状排版，如果从未接，可以点击早前整理的相关文章。
来看一个简单的示例：
.egg {
float: left;
shape-outside: ellipse(120px 160px at 50% 50%);
width: 280px;
height: 320px;
}将看到的效果如下：
而其中效果图中的椭圆是通过clip-path绘制的：
clip-path: ellipse(120px 160px at 50% 50%);
但有时候你想让文本围绕一个弯曲的形状进行排版，像下图所示：
CSS中的基本图形函数是没法绘制上图那相的曲线图形形状，但path()可以，只不过shape-outside不能支持path()绘制的形状。不过还好，在shape-outside中也可以通过url()来传SVG中绘制好的形状。也可以像传递一个图片的形式使用：
shape-outside: url('curved-shape.svg');使用shape-outside实现文本围绕不同形状的排版效果，需要对图形元素使用浮动。但在CSS中提供了CSS Exclusions模块，它可以解决这个问题。如果你感兴趣的话，可以阅读《CSS Exclusions:让布局变得更有意思》一文。
在CSS中使用path()改变的基本图形
在SVG中可以通过
很有意思的是，在CSS中可以使用path()来改变SVG中的
.svg-1:hover path {
d: path("M8,2 L2,8");
}
从上面的效果和代码中，可以看出。在CSS中给显式的设置了path元素的样式，修改path元素的属性的属性值。比如path元素中的d属性的值，
svg:hover circle {
cx: 40;
cy: 40;
r: 40;
}看上去是不是很有意思。
总结
这篇文章简单的介绍了CSS中属性中怎么使用基本图形函数和路径图形函数：
clip-path和shape-outside属性值中可以使用polygon()、circle()、ellipse()和inset()函数绘制的图形，但不能使用path()函数，不过可能通过url()给其传
offset-path和clip-path以及shape-outside相反，只能使用path()函数绘制的图形，但不能使用CSS中绘制图形的图形函数
在CSS中可以显式的重置svg元素中图形元素的属性值，从而改变SVG绘制的图形。
