Heim > Artikel > Web-Frontend > So machen Sie Schaltflächen im CSS-Stil rund
So runden Sie eine Schaltfläche im CSS-Stil ab: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann die vier Ecken der Schaltfläche über das Attribut „border-radius“ in CSS.
Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Verwandeln Sie die Schaltfläche in einen Kreis (mit Bogenmaß)
border-radius kann die Schaltfläche in einen Kreis umwandeln oder einen Bogenmaß-Rand zu p hinzufügen
border-radius Regeln:
Ein Wert: vier The Abgerundete Ecken haben den gleichen Wert
Zwei Werte: Der erste Wert ist die obere linke Ecke und die untere rechte Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke
Drei Werte: Der erste Wert ist die obere linke Ecke Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke, der dritte Wert ist die untere rechte Ecke
Vier Werte: der erste Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke, der dritte Wert ist die untere rechte Ecke, und der vierte Wert ist das untere linke Eckhorn.
Stil:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: green;
border: none;
color: white;
margin: 6px 10px;
}
.btnStyle1{
border-radius: 6px;
}
.btnStyle2{
border-radius: 26px 6px;
}
.btnStyle3{
border-radius: 6px 26px 60px;
}
.btnStyle4{
border-radius: 6px 126px 236px 346px;
}
.bolder{
border: solid 1px green;
width: 500px;
height: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="bolder">
<button class="btn btnStyle1">按钮1</button>
<button class="btn btnStyle2">按钮2</button>
<button class="btn btnStyle3">按钮3</button>
<button class="btn btnStyle4">按钮4</button>
</p>
</body>
</html>Manchmal schlägt der Randradius fehl te diese Aussage
border-radius: 6px !important;
Empfohlen: „
HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo machen Sie Schaltflächen im CSS-Stil rund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!