css svg 贝塞尔曲线

CSS中的SVG路径和贝塞尔曲线都可以被用来绘制各种形状，但是在某些情况下，贝塞尔曲线更加方便且灵活。

贝塞尔曲线是一种数学曲线，它由控制点来定位，因此它可以精确地描述曲线的形状。在CSS中，贝塞尔曲线通常表示成一个包含四个控制点的坐标系，分别为P0，P1，P2和P3。其中P0是曲线的起点，P3是曲线的终点，P1和P2分别是曲线的两个关键点。

使用CSS中的贝塞尔曲线可以实现各种不同的动画效果、图形和视觉效果。例如，在动画中可以使用一个贝塞尔曲线来控制元素的速度。此外，可以使用贝塞尔曲线来制作各种形状，如五角星、圆弧、圆和曲线。

path {
  stroke: black;
  stroke-width: 2;
  fill: none;
  d: path( 'M10 80 C 40 10,65 10,95 80 S 150 150,180 80')
}

在上面的代码中，使用了一个path元素和贝塞尔曲线来绘制一个抛物线形状。该曲线包含了起点、两个控制点和终点，以及一些附加指令来指定如何绘制曲线。

总之，CSS中的SVG路径和贝塞尔曲线是非常有用的工具，用于创建各种形状和动画效果。贝塞尔曲线特别适用于要求精确控制形状的情况。