css3 绘制画圆、扇形

最新推荐文章于 2022-04-20 14:40:01 发布

IT新时代

最新推荐文章于 2022-04-20 14:40:01 发布

阅读量659

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/llll789789/article/details/97510957

版权

本文介绍了如何使用CSS3来绘制圆形和扇形，包括实现原理和具体代码示例。通过设置border-radius属性，可以创建出不同角度的扇形，这对于前端开发者来说是一种有效的图形替代图片的方法。

摘要由CSDN通过智能技术生成

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

实现圆形

<div class="circle"></div>
<style>
.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>

效果如下：

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

原理：

border-radius: 50% 弯曲元素的边框以创建圆。
由于圆在任何给定点具有相同的半径，故宽和高都需要保证一样的值，不同的值将创建椭圆。
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

实现扇形

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

<div class="sector"></div>
<style>
.sector{
  border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  backgr

关注