弑君者

V1

2022/04/13阅读:28主题:默认主题

前端之各司其职

前端各司其职

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

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

css 做更多的事情

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

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

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

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

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

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

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

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

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

另外一种思路

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

分类:

前端

标签:

前端

作者介绍

弑君者
V1