CSS3-Randeffekte

Was ist CSS?

CSS (Abkürzung für Cascading Style Sheets), übersetzt „kaskadierende Stilblätter“ oder „kaskadierende Stilblätter“, wird als Stilblatt bezeichnet.

Der Hauptzweck von CSS#

Es wird hauptsächlich verwendet, um das Erscheinungsbild oder den Stil von HTML-Webseiten festzulegen. Aussehen oder Stil: Größe, Farbe und Schriftart des Textes auf der HTML-Webseite, Hintergrundfarbe und Hintergrundbild der Webseite.

CSS3-Rahmen

CSS3-Rahmen

Mit CSS3 können Sie abgerundete Ränder erstellen, Rechtecken Schatten hinzufügen und Bilder zum Zeichnen von Rändern verwenden – ohne Designsoftware wie Photoshop zu verwenden.

Sie lernen die folgenden Rahmeneigenschaften kennen: Rahmenradius, Boxschatten, Rahmenbild.

1. Abgerundeter Rand border-radius#

In CSS3 wird die Eigenschaft border-radius verwendet, um abgerundete Ecken zu erstellen:

1.1. Syntax für den Rahmenradius

Die grundlegende Schreibmethode ist wie folgt:

Legen Sie die obere linke Ecke fest

border-top-left-radius:10px;

Legen Sie die obere rechte Ecke fest

border-top-right-radius:10px;

Stellen Sie die untere linke Ecke ein

border-bottom-left-radius:10px;

Stellen Sie die untere linke Ecke ein

border-bottom-right-radius:10px;

Kurzform der vier Ecken

Die Ausführungsreihenfolge ist wie folgt: oben links-oben rechts-unten rechts-unten links

border-radius:1px 2px 3px 4px;

Stellen Sie die vier Eckwerte so ein, dass sie einheitlich sind

border-radius:10px;

Unterstützungsprozentsatz

border-radius:100%;

Unterstütze sie

border-radius:2em;

Unterstützte Vorgänge

border-radius:30px/30px; /*支持加和除其余的不支持*/

JavaScript-Syntax

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2 Browserkompatibilität#

-webkit: repräsentiert private Attribute oder Kernel-Identifikationscodes von Webkit-basierten Browsern wie Chrome und Safari.

-webkit-border-radius:5px; -moz: stellt die privaten Attribute oder den Kernel-Identifikationscode des Firefox-Browsers dar.

-moz-border-radius:5px;

ms stellt das private Attribut oder den Kernel-Identifikationscode des IE-Browsers dar.

-ms-border-radius: 5px;

-o- stellt die privaten Attribute oder den Kernel-Identifikationscode des Opera-Browsers dar.

-o-Randradius: 5px;

IE9+, Firefox 4+, Chrome, Safari 5+ und Opera unterstützen die Border-Radius-Eigenschaft.

Rahmenradius: 10px;

Zusammenfassen

Oben sehen Sie den CSS3-Randeffekt, den ich Ihnen vorgestellt habe. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!