弑
弑君者
V1
2022/04/13阅读:28主题:默认主题
前端之各司其职
前端各司其职
前端虽然现在经过各种框架的封装,但是本质还是html,js和css,它们各司其职。
html 负责骨架 js负责交互效果 css负责样式渲染
css 做更多的事情
假设现在有个问题,让你用css实现一个饼图,你如何实现呢? 这个问题其实在面试中还是蛮常见的,我们可以思考下,假如是你,你会如何实现呢? 把这种场景想象下,你在面试的场景中。
这里的难点是如何实现扇形?
因为我们都知道border-radius可以实现画圆,那么是不是也可以画弧呢?
答案是可以使用border-radius来画弧,但是这里有个问题,如果使用border-radius来画弧,会形成这样的类似的弧

这里和使用border画三角形类似,那么如何根据数据比例画不同的弧度的弧呢?
能想到的就是通过多层叠加,可是没有想好如何叠加。
后来看了下,果然是通过多层互相覆盖,造成视觉差,这样就形成了我们看到的效果
使用div画出静态饼图的原理基本是这样的
如果多个颜色,同样可以使用多种颜色叠加来实现,道理是一样的。
另外一种思路
使用linear-gradient,思路都是一样的。
作者介绍
弑
弑君者
V1