Einführung in allgemeine Eigenschaften in CSS3

RGBA

background：rgba(0, 118, 160, .25);

Die ersten drei Werte sind die RGB-Farbwerte und der letzte Wert ist der Grad der Transparenz (0 = transparent, 1 = undurchsichtig).

RBGA kann auf alle farbbezogenen Eigenschaften wie Schriftfarbe, Rahmenfarbe, Hintergrundfarbe, Schattenfarbe usw. angewendet werden.

Textschatten text-shadow (keine Beurteilung des Browsers erforderlich)

text-shadow:2px 3px 2px #000;

Die Struktur von text-shadow ist in der folgenden Reihenfolge: X – Offset, Y – Offset, Unschärfe und color;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

wird auf einen negativen Wert gesetzt, um den X-Offset-Schatten nach links zu verschieben. Offset Y auf einen negativen Wert setzen – Verschiebt den Schatten nach oben. Farben können RGBA-Werte verwenden.

text-shadow:0px 1px 0px #fff,0px -1px 0px #000；

Eine Liste von Textschatten (durch Kommas getrennt), 1 Pixel oberer und 1 Pixel unterer Schatten.

Box-Shadow Box-Shadow (Sie müssen den Browser beurteilen)

Die Struktur des Box-Shadow ist dieselbe des Textschattens: jeweils markiert: X-Versatz, Y-Versatz, Unschärfe und Farbe.

-webkit-box-shadow:5px 5px 7px #333;
-moz-box-shadow:5px 5px 7ix #333;

Ebenso können mehrere Schattenstile definiert werden, getrennt durch Kommas.

moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

Das Box-Shadow-Attribut hat höchstens 6 Parametereinstellungen:

Schattentyp: Dieser Parameter ist ein optionaler Wert Standardwerte Die Projektionsmethode ist „Außenschatten“. Wenn der eindeutige Wert „Einschub“ ist, wird der Außenschatten in einen Innenschatten umgewandelt. Das heißt, wenn der Schattentyp auf „Einschub“ eingestellt ist, ist seine Projektion ein Innenschatten Schatten;

X-Offset: Bezieht sich auf den horizontalen Versatz des Schattens. Wenn der Wert positiv ist, befindet sich der Schatten auf der rechten Seite des Objekts Der Wert ist negativ, der Schatten befindet sich auf der linken Seite des Objekts.

Y-Versatz: Bezieht sich auf den vertikalen Versatz des Schattens. Der Schatten befindet sich am unteren Rand des Objekts. Andernfalls befindet sich der Schatten am unteren Rand des Objekts.

Schattenausdehnungsradius , und sein Wert kann positiv oder negativ sein, wird der gesamte Schatten erweitert und erweitert, andernfalls wird der Schatten reduziert, wenn der Wert negativ ist

Schattenfarbe: Dieser Parameter ist optional Wenn Sie keine Farbe festlegen, verwendet der Browser die Standardfarbe. Die Standardfarbe jedes Browsers ist jedoch unterschiedlich. Dies gilt insbesondere für Safari- und Chrome-Browser unter dem Webkit-Kernel. Farblos, dh transparent, wird empfohlen, dies nicht wegzulassen diesen Parameter.

Box-Randradius border-radius (muss im Browser ermittelt werden)

Die Abkürzung für Border-Radius ähnelt

Padding

und Margin Eigenschaften (z. B. Randradius: 20 Pixel). Um den Randradius in der Reihenfolge des Browsers darzustellen, verwenden Sie „-WebKit-“ in WebKit-Browsern und „-moz-“ in Firefox.

border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;

Sie können für jede Ecke einen anderen Wert angeben. Beachten Sie, dass Firefox und Webkit Angular unterschiedliche Eigenschaftsnamen haben.

Wie schreibe ich „Webkit“

Wie schreibe ich „Firefox“

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-right-left-radius:45px;

Das obige ist der detaillierte Inhalt vonEinführung in allgemeine Eigenschaften in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!