So zeichnen Sie einen Kreis in CSS3

So implementieren Sie das CSS3-Kreiszeichnen: Erstellen Sie zunächst eine HTML-Beispieldatei, definieren Sie dann ein Div und nennen Sie es „Kreis“. Verwenden Sie abschließend das CSS-Attribut „Border-Radius“, damit das Div den Kreiseffekt erzielt.

Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.

Empfohlen: „css-Video-Tutorial“

css ist immer leistungsfähiger geworden. Sie können damit verschiedene einfache Formen zeichnen, um die Bildanzeige zu ersetzen.

Der Effekt der Realisierung eines kreisförmigen

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

ist wie folgt:

border-radius Die vier Werte der abgerundeten Ecken sind in der Reihenfolge: oben links, oben rechts, unten rechts, unten links . Hier wird nur ein Wert eingestellt, was bedeutet, dass die Werte der vier Ecken alle 50 % betragen.

Prinzip:

Randradius: 50 % Biegen Sie den Rand des Elements, um einen Kreis zu erstellen.

Da der Kreis an jedem Punkt den gleichen Radius hat, müssen Breite und Höhe den gleichen Wert haben. Durch unterschiedliche Werte entsteht eine Ellipse.

Lüfterform realisieren

Verwenden Sie den Randradius, um eine 90-Grad-Fächerform zu realisieren:

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

Der Effekt ist wie folgt:

Prinzip:

Die obere linke Ecke ist eine abgerundete Ecke und die andere Drei Ecken sind rechte Winkel: Der Wert der oberen linken Ecke ist derselbe wie die Breite und Höhe, und die Werte der anderen drei Ecken bleiben unverändert (gleich 0).

Zeichnen Sie einen Sektor in einem beliebigen Winkel

Der Effekt ist wie folgt:

/Zeichnen Sie einen 60-Grad-Sektor/

/Zeichnen Sie einen 85-Grad-Sektor/

/Zeichnen Sie einen nach rechts gerichteten Sektor Sektor, 90-Grad-Sektor/

/*Zeichne einen Farbsektor*/

/*Zeichne einen Halbkreiswinkel mit verschiedenen Farben*/

Der vollständige Code lautet wie folgt:

<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>

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie einen Kreis in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!