css3怎么画圆

这篇文章将为大家详细讲解有关css3怎么画圆，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联建站专注于阜城企业网站建设,成都响应式网站建设,成都商城网站开发。阜城网站建设公司,为阜城等地区提供建站服务。全流程按需网站制作，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

css3画圆的实现方法：首先创建一个HTML示例文件；然后定义一个div，并命名为“circle”；最后通过css属性“border-radius”使div实现圆的效果即可。

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

实现圆形

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

效果如下：

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

原理：

border-radius: 50% 弯曲元素的边框以创建圆。

由于圆在任何给定点具有相同的半径，故宽和高都需要保证一样的值，不同的值将创建椭圆。

实现扇形

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

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

效果如下：

原理：

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

绘制任意角度的扇形

效果如下：

/绘制一个60度扇形/

/绘制一个85度扇形/

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

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

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

完整代码如下：

<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个85度扇形*/--p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个向右扇形，90度扇形*-->
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个颜色扇形 */--p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--/*绘制一个不同颜色半圆夹角 */-->
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<style>
.shanxing{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: yellow;
}
.sx1{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    clip: rect(0px,100px,200px,0px);/*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，
     使用clip属性，元素必须是absolute的 */
     
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an1 2s infinite linear; */
}
.sx2{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    clip: rect(0px,100px,200px,0px);
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an2 2s infinite linear;*/
}
/*绘制一个60度扇形*/
.shanxing1 .sx1{transform: rotate(-30deg);}
.shanxing1 .sx2{transform: rotate(-150deg);}
/*绘制一个85度扇形*/
.shanxing2 .sx1{transform: rotate(-45deg);}
.shanxing2 .sx2{transform: rotate(-140deg);}
/*绘制一个向右扇形，90度扇形*/
.shanxing3 .sx1{transform: rotate(45deg);}
.shanxing3 .sx2{transform: rotate(-45deg);}
/*绘制一个颜色扇形 */
.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*绘制一个不同颜色半圆夹角 */
.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;       
</style>

关于“css3怎么画圆”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

网站题目：css3怎么画圆
分享网址：https://www.cdcxhl.com/article14/poeode.html

成都网站建设公司_创新互联，为您提供品牌网站建设、电子商务、网站改版、手机网站建设、外贸建站、网站收录

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联