Heim > Artikel > Web-Frontend > Wie schreibe ich einen ovalen Button in CSS?
Wie schreibe ich einen ovalen Button in CSS?
- WBOYOriginal
- 2021-11-26 19:06:304816Durchsuche
In CSS können Sie die Attribute width, height und „border-radius“ verwenden, um eine elliptische Schaltfläche zu implementieren, die als „button element {width: width value; height: height value; border-radius:100%; }".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So schreiben Sie eine ovale Schaltfläche in CSS
In CSS können Sie eine ovale Schaltfläche über das Attribut „border-radius“ implementieren.
Schauen wir uns ein Beispiel an:
Zuerst fügen wir dem Schaltflächenelement einen rechteckigen Stil hinzu Attribut zum Festlegen des Rechtecks. Ausgabeergebnis für Ellipse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css制作椭圆按钮</title>
<style>
.anniu{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button class="anniu">按钮</button>
</body>
</html>:
(Teilen von Lernvideos:
CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWie schreibe ich einen ovalen Button in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- So legen Sie ein Hintergrundbild für eine Schaltfläche in CSS fest
- So legen Sie die Farbe des CSS-Tabellenfelds fest
- So legen Sie das Hintergrundbild der Navigationsleiste in CSS fest
- So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet
- So erzielen Sie in CSS einen durchscheinenden Text-undurchsichtigen Hintergrundeffekt