前端各司其职

前端虽然现在经过各种框架的封装，但是本质还是html，js和css，它们各司其职。

html 负责骨架 js负责交互效果 css负责样式渲染

css 做更多的事情

假设现在有个问题，让你用css实现一个饼图，你如何实现呢？ 这个问题其实在面试中还是蛮常见的，我们可以思考下，假如是你，你会如何实现呢？ 把这种场景想象下，你在面试的场景中。

这里的难点是如何实现扇形？

因为我们都知道border-radius可以实现画圆，那么是不是也可以画弧呢？

答案是可以使用border-radius来画弧，但是这里有个问题，如果使用border-radius来画弧，会形成这样的类似的弧

这里和使用border画三角形类似，那么如何根据数据比例画不同的弧度的弧呢？

能想到的就是通过多层叠加，可是没有想好如何叠加。

后来看了下，果然是通过多层互相覆盖，造成视觉差，这样就形成了我们看到的效果

使用div画出静态饼图的原理基本是这样的

如果多个颜色，同样可以使用多种颜色叠加来实现，道理是一样的。

另外一种思路

使用linear-gradient，思路都是一样的。