Heim > Artikel > Web-Frontend > So schreiben Sie einen CSS-Rahmen in einen abgerundeten Rahmen
So schreiben Sie einen CSS-Rahmen in einen abgerundeten Rahmen
- WBOYOriginal
- 2021-11-12 11:44:568327Durchsuche
So schreiben Sie: 1. Fügen Sie den Stil „Rahmenradius: abgerundeter Eckenwert;“ zum Rahmen hinzu, um die Größe der abgerundeten Ecken einheitlich festzulegen; border-top-right" -radius: filet value;" und andere Stile legen jeweils die Größe der vier Ecken fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So schreiben Sie einen CSS-Rahmen in einen abgerundeten Rahmen
Grundlegende Verwendung des abgerundeten Rahmens (Rahmenradius): Das Attribut „Rahmenradius“ ist ein abgekürztes Attribut, mit dem die Attribute von vier abgerundeten Ecken festgelegt werden.
Die einfachste Verwendung des abgerundeten Rahmens besteht darin, vier abgerundete Ecken desselben Bogens festzulegen
border-top-left-radius：30px； //左上角 border-top-right-radius：30px； //右上角 border-bottom-left-radius：30px； //右下角 border-bottom-right-radius：30px； //左下角
Wenn die abgerundeten Ecken dieser vier Bogenmaße gleich sind, kann dies wie folgt geschrieben werden:
border-radius：30px；
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="div1">圆角边框</div>
</body>
</html>Ausgabe Ergebnis:
Für mehr Programmierkenntnisse besuchen Sie bitte: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonSo schreiben Sie einen CSS-Rahmen in einen abgerundeten Rahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!