Heim > Artikel > Web-Frontend > So stellen Sie das Eingabefeld in CSS so ein, dass es kreisförmig ist
So stellen Sie das Eingabefeld in CSS so ein, dass es kreisförmig ist
- WBOYOriginal
- 2021-11-29 11:57:344867Durchsuche
Methode: 1. Fügen Sie den Stil „Breite: Durchmesserwert; Höhe: Durchmesserwert;“ zum Eingabefeldelement hinzu und legen Sie das Eingabefeld auf ein Quadrat fest. 2. Verwenden Sie das Attribut „Rahmenradius“, um die quadratische Eingabe festzulegen Fügen Sie einfach den Stil „border-radius:100%;“ zum Eingabefeld hinzu.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie das Eingabefeld in CSS so ein, dass es kreisförmig ist.
In CSS können Sie das Eingabefeld zunächst auf ein Quadrat festlegen und dann die abgerundeten Ecken des Eingabefelds festlegen, um das Eingabefeld auf einen Kreis festzulegen .
Zu diesem Zeitpunkt müssen Sie das Attribut border-radius verwenden. Die Funktion dieses Attributs besteht darin, den abgerundeten Rand des Elements festzulegen.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>123</title>
<style type="text/css">
.myinput{
width:100px;
height:100px;
border-radius:100%;
}
</style>
</head>
<body>
<input type="text" value="" class="myinput" placeholder="这是一个input"/>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo stellen Sie das Eingabefeld in CSS so ein, dass es kreisförmig ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!