Heim > Artikel > Web-Frontend > Wie erstelle ich einen Kreis in CSS?
Wie erstelle ich einen Kreis in CSS?
- 青灯夜游Original
- 2021-04-08 17:57:1611179Durchsuche
In CSS können Sie das Attribut „border-radius“ verwenden, um einem Element einen abgerundeten Rand hinzuzufügen. Sie müssen nur den „border-radius: 100 %“ festlegen quadratisches Element mit gleicher Breite und Höhe.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
p+Css Um einen Viertelkreis zu erstellen, verwenden wir hauptsächlich die versteckte Eigenschaft „Grenzradius“ der Ecken in Css3.0. Mit dieser Eigenschaft können wir einen Kreis, einen Halbkreis, einen Dreiviertelkreis usw. zeichnen Viertelkreis Ein Kreis usw. Ich werde es in Zukunft aktualisieren...
Wie man das Attribut „border-radius“ verwendet, das Folgende ist die grundlegendste Methode zur Verwendung des Attributs „border-radius“:
.round {
border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}1. Verwenden Sie border-radius, um einen Kreis zu zeichnen:
#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
/*-webkit-border-radius: 100%;*/
}Denken Sie sorgfältig darüber nach, der Radius des größten Kreises in einem Quadrat (200*200) beträgt: 100.
2. Hohlkreiscode: Der Hohlraum Der Kreis hat eigentlich nur einen Rand und der hohle Teil ist mit anderen Farben gefüllt:
#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}
Ähnlich gepunkteter Kreiscode:
#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}
3. Halbkreis- und Viertelkreiscodes:
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
#quartercircle{
width: 200px;
height: 200px;
background-color: #ffffaa;
border-radius:0 0 0 200px;
-webkit-border-radius: 0 0 0 200px;
-moz-border-radius: 0 0 0 200px;
-ms-border-radius: 0 0 0 200px;
-o-border-radius: 0 0 0 200px;
}
#quartercircle .dianxuan{
font-family:Arial;
color:gray;
font-size:25px;
padding-top: 55px;
padding-left: 90px;
transform:rotate(32deg);
-ms-transform:rotate(32deg); /* Internet Explorer */
-moz-transform:rotate(32deg); /* Firefox */
-webkit-transform:rotate(32deg); /* Safari 和 Chrome */
-o-transform:rotate(32deg); /* Opera */
}
</style>
</head>
<body>
<div id="quartercircle">
<div>点选</div>
</div>
</body>
</html>
Erläuterung:
-moz (zum Beispiel -moz-border-radius) wird in Firefox verwendet.
-webkit (zum Beispiel: -webkit-border-radius) wird in Safari verwendet und Chrome
Die Unterstützung jedes Browsers für Border-Radius ist in der Tabelle dargestellt:
| Browser | Unterstützung |
|---|---|
| Firefox(2, 3+) | √ |
| Google Chrome( 1.0.154+…) | √ |
| Google Chrome(2.0.156 + …) | √ |
| Safari(3.2.1+ Windows) | √ |
| Internet. Explorer(IE7 , IE8 ) | × |
| Opera 9.6 | × |
(Lernen Sie das Teilen von Videos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Kreis in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!