So verwenden Sie das Attribut border-radius-CSS-Tutorial-php.cn

So verwenden Sie das Attribut border-radius

不言

Freigeben： 2021-04-26 17:25:21

Original

9914 Leute haben es durchsucht

So verwenden Sie das Attribut „border-radius“: Erstellen Sie zunächst eine HTML-Beispieldatei. Anschließend legen Sie den Stil des div auf „border-radius:45px;“ fest.

So verwenden Sie das Attribut border-radius

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

Border-Radius-Attribut ist ein Rahmenattribut, das verwendet werden kann, um die abgerundeten Ecken des Rahmens festzulegen. Was ist also die spezifische Verwendung des Rahmenradius-Attributs? In diesem Artikel wird Ihnen die spezifische Verwendung des Attributs „Border-Radius“ vorgestellt. Schauen wir uns den spezifischen Inhalt unten an.

Wenn wir uns normalerweise das Attribut „border-radius“ ansehen, sehen wir seine Syntax wie folgt:

　border-radius: 1-4 length|% / 1-4 length|%;

Nach dem Login kopieren

Viele Leute wissen vielleicht nicht, was das bedeutet, aber tatsächlich ist es border- Radius< Die vollständige Schreibmethode von 🎜>, wir schreiben normalerweise: border-radius:20px;, die vollständige Schreibmethode sollte sein: border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;, wobei die ersten vier 20px darstellen Der horizontale Radius und die folgenden vier Werte stellen den vertikalen Radius dar. Wir zeichnen Ellipsen oder Kreise, indem wir den horizontalen Radius und den vertikalen Radius festlegen. Wir können auch einige andere gekrümmte Grafiken zeichnen.

Als nächstes schauen wir uns die Verwendung des

border-radius-Attributs genauer an

Das können wir

Setzen Sie einen abgerundeten Rand oder einen Kreis ein

Abgerundeter Rand

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 200px;
    width: 300px;
    border-radius: 45px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt

So verwenden Sie das Attribut border-radius

Kreisförmig

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 100px;
    width: 100px;
    border-radius: 54px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt

So verwenden Sie das Attribut border-radius

kann eingestellt werden mit Bogenmaß Andere Grafiken

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
#test {
	height: 100px;
    width: 200px;
    border: 3px solid pink;
    border-radius: 60px 5px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt

So verwenden Sie das Attribut border-radius

Dieser Artikel Hier endet es. Weitere spannende Inhalte finden Sie in anderen verwandten Kolumnen-Tutorials auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Attribut border-radius. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!