Heim > Artikel > Web-Frontend > So verwenden Sie das Attribut border-radius

So verwenden Sie das Attribut border-radius

不言Original: 2019-02-14 17:51:499896Durchsuche

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.

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

Viele Leute wissen vielleicht nicht, was das bedeutet, aber tatsächlich ist es border- Radius, 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>

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>

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>

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!

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

Vorheriger Artikel：So verwenden Sie das Attribut „font-family“.Nächster Artikel：So verwenden Sie das Attribut „font-family“.

In Verbindung stehende Artikel

Mehr sehen