Wie erreiche ich den Anzeigeeffekt des abgerundeten Schaltflächenstils mit CSS (Beispiel)?

Im Webdesign-Prozess ist der Standardeffekt allgemeiner Beschriftungsattribute nicht sehr schön. Beispielsweise ist der Schaltflächenstil äußerst gewöhnlich und hat kein ästhetisches Gefühl. In diesem Artikel werden Ihnen daher verwandte Operationsbeispiele zum abgerundeten Schaltflächeneffekt des CSS-Einstellungsschaltflächenstils vorgestellt.

Der Code lautet wie folgt:

<div style="width:100px;height:50px;background-color:red;border-radius:15px;">

oder

<input type="button" value=" " style="border-radius:5px;" />

Der Effekt ist wie folgt:

Denken Sie nach dem Lesen des obigen Codes nicht, dass es sehr einfach ist? Tatsächlich ist der Schlüssel zum Festlegen des Schaltflächenstils mit abgerundeten Rechtecken in HTML das Attribut border-radius
in CSS. Solange Sie die grundlegende Verwendung dieses Attributs beherrschen, können Sie problemlos abgerundete Ecken für Divs, Bilder oder Rahmenschaltflächen festlegen.

Einführung in die wichtigsten Wissenspunkte: Das Attribut „border-radius“ ist ein zusammengesetztes Attribut, das bis zu vier „border -*- radius“-Attribute angeben kann. Mit diesem Attribut können Sie einem Element einen abgerundeten Rand hinzufügen!

border-radius: 1-4 length|% / 1-4 length|%;

Die Reihenfolge der vier Werte für jeden Radius ist: oben links, oben rechts, unten rechts, unten links. Wenn die untere linke Ecke weggelassen wird, ist die obere rechte Ecke dieselbe. Wenn die untere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe. Wenn die obere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe.

Dann wird die Einführung in diesem Artikel zum Festlegen des Stils mit abgerundeten Ecken von CSS-Schaltflächen für Freunde in Not hilfreich sein.

Das obige ist der detaillierte Inhalt vonWie erreiche ich den Anzeigeeffekt des abgerundeten Schaltflächenstils mit CSS (Beispiel)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!