這篇文章將為大家詳細(xì)講解有關(guān)css3怎么畫圓，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注于阜城企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),成都商城網(wǎng)站開發(fā)。阜城網(wǎng)站建設(shè)公司,為阜城等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

css3畫圓的實(shí)現(xiàn)方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一個(gè)div，并命名為“circle”；最后通過css屬性“border-radius”使div實(shí)現(xiàn)圓的效果即可。

css已經(jīng)越來(lái)越強(qiáng)大了 ，可以使用它來(lái)繪制各種簡(jiǎn)單的形狀，用于代替圖片顯示，這次的分享主要用到畫圓，扇形。

實(shí)現(xiàn)圓形

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

效果如下：

border-radius圓角的四個(gè)值按順序取值分別為：左上、右上、右下、左下。這里只設(shè)置一個(gè)值，代表四個(gè)角的取值都為為50%

原理：

border-radius: 50% 彎曲元素的邊框以創(chuàng)建圓。

由于圓在任何給定點(diǎn)具有相同的半徑，故寬和高都需要保證一樣的值，不同的值將創(chuàng)建橢圓。

實(shí)現(xiàn)扇形

利用border-radius，實(shí)現(xiàn)90度角的扇形：

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

效果如下：

原理：

左上角是圓角，其余三個(gè)角都是直角：左上角的值為寬和高一樣的值，其他三個(gè)角的值不變（等于0）。

繪制任意角度的扇形

效果如下：

/繪制一個(gè)60度扇形/

/繪制一個(gè)85度扇形/

/繪制一個(gè)向右扇形，90度扇形/

/*繪制一個(gè)顏色扇形 */

/*繪制一個(gè)不同顏色半圓夾角 */

完整代碼如下：

<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*繪制一個(gè)85度扇形*/--p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*繪制一個(gè)向右扇形，90度扇形*-->
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*繪制一個(gè)顏色扇形 */--p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--/*繪制一個(gè)不同顏色半圓夾角 */-->
<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);/*這個(gè)clip屬性用來(lái)繪制半圓，在clip的rect范圍內(nèi)的內(nèi)容顯示出來(lái)，
     使用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;*/
}
/*繪制一個(gè)60度扇形*/
.shanxing1 .sx1{transform: rotate(-30deg);}
.shanxing1 .sx2{transform: rotate(-150deg);}
/*繪制一個(gè)85度扇形*/
.shanxing2 .sx1{transform: rotate(-45deg);}
.shanxing2 .sx2{transform: rotate(-140deg);}
/*繪制一個(gè)向右扇形，90度扇形*/
.shanxing3 .sx1{transform: rotate(45deg);}
.shanxing3 .sx2{transform: rotate(-45deg);}
/*繪制一個(gè)顏色扇形 */
.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*繪制一個(gè)不同顏色半圓夾角 */
.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;       
</style>

關(guān)于“css3怎么畫圓”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站題目：css3怎么畫圓
分享網(wǎng)址：http://jinyejixie.com/article14/poeode.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)