web前端入门到实战：css3 绘制画圆、扇形

css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形

实现圆形

效果如下：

border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。这里只设置一个值，代表四个角的取值都为为50%

原理：

border-radius: 50% 弯曲元素的边框以创建圆。
由于圆在任何给定点具有相同的半径，故宽和高都需要保证一样的值，不同的值将创建椭圆。

实现扇形

利用border-radius，实现90度角的扇形：

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

效果如下：

原理：

左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。

2、绘制任意角度的扇形

效果如下：

/绘制一个60度扇形/

/绘制一个85度扇形/

/绘制一个向右扇形，90度扇形/

/*绘制一个颜色扇形 */

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好，数学不是特别好。所以我选择了前端。工作第六个年头了，我庆幸自己选择了这条路。767-273-102 秋裙。与大家分享一些学习方法，实战开发需要注意的细节。从零基础开始怎么样学好前端。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

/*绘制一个不同颜色半圆夹角 */

完整代码如下：

前端的专业程度很强，80%的问题自己很难解决，而且会很浪费时间，一个小问题可以困扰一天，这样自信心会受到严重的打击！