Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich einen Viertelkreis in CSS?

Wie erstelle ich einen Viertelkreis in CSS?

青灯夜游
青灯夜游Original
2021-11-09 14:00:278204Durchsuche

So erstellen Sie einen Viertelkreis in CSS: 1. Verwenden Sie die Attribute width und height, um die Breite und Höhe des Elements gleich einzustellen. 2. Verwenden Sie das Attribut border-radius, um den Wert einer abgerundeten Ecke des Elements festzulegen Element zum Breiten- und Höhenwert und die anderen drei Kreise Der Wert des Winkels ist 0, und die Syntax lautet „Grenzradius: Breiten- oder Höhenwert 0 0 0;“.

Wie erstelle ich einen Viertelkreis in CSS?

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

Wenn es in CSS darum geht, Kreise zu erstellen, fällt mir das Attribut „border-radius“ ein.

Dieses Attribut kann ein quadratisches Element mit gleicher Breite und Höhe in einen Kreis umwandeln

p {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	border-radius: 50px;
}

<p></p>

Wie erstelle ich einen Viertelkreis in CSS?

Aber manchmal brauchen wir keinen Vollkreis, sondern nur einen Teil, also einen Viertelkreis. Wie geht das?

Oder verwenden Sie das Attribut border-radius, um den Wert einer abgerundeten Ecke des Elements auf den Breiten- oder Höhenwert und den Wert der anderen drei abgerundeten Ecken auf 0 zu setzen:

border-radius: 50px 0 0 0;

Wie erstelle ich einen Viertelkreis in CSS?

border-radius: 0 50px 0 0;

Wie erstelle ich einen Viertelkreis in CSS?

border-radius: 0 0 50px 0;

Wie erstelle ich einen Viertelkreis in CSS?

border-radius: 0 0 0 50px;

Wie erstelle ich einen Viertelkreis in CSS?

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Viertelkreis in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn