Heim > Artikel > Web-Frontend > So machen Sie Schaltflächen im CSS-Stil rund

So machen Sie Schaltflächen im CSS-Stil rund

藏色散人Original: 2021-02-28 10:17:288497Durchsuche

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;

!important in CSS wird im Allgemeinen für niedrigere Versionen außer iE 6 verwendet. Es wird zum Hacken verwendet. Es folgt die !important-CSS-Anweisung, damit der Browser diese Anweisung bevorzugt ausführt, da CSS Es gibt geerbte Stile und das Hinzufügen !importanrt kann den übergeordneten Stil überschreiben.

In Verbindung stehende Artikel

Mehr sehen