Sammlung allgemeiner CSS3-Attribute

RGBA

Hintergrund: rgba(0, 118, 160, .25);

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

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

Text Shadow 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-Verschiebung, Unschärfe und Farbe;

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

eingestellt Bei negativen Werten verschiebt X-Offset den Schatten nach links. 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;

Liste der Textschatten (durch Kommas getrennt), 1px oben und 1px unten 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, wenn Wenn kein Wert festgelegt ist, ist die Standardprojektionsmethode „Außenschatten“. Wenn der eindeutige Wert „Einschub“ verwendet wird, wird der Außenschatten in einen Innenschatten umgewandelt. Das heißt, wenn der Schattentyp auf „Einschub“ eingestellt ist. , die Projektion ist ein innerer Schatten; Wenn der Wert negativ ist, befindet sich der Schatten auf der linken Seite des Objekts.

Y-Versatz: Bezieht sich auf den vertikalen Versatz des Schattens. Bei einem positiven Wert befindet sich der Schatten am unteren Rand des Objekts. Bei einem negativen Wert befindet sich der Schatten am oberen Rand des Objekts , aber sein Wert kann nur positiv sein, was bedeutet, dass der Schatten keinen Unschärfeeffekt hat. Je größer der Wert, desto unschärfer wird der Schattenausdehnungsradius. Dieser Parameter ist optional und sein Wert kann positiv oder negativ sein. Wenn der Wert positiv ist, wird der gesamte Schatten erweitert. Andernfalls ist der Wert negativ. Wenn der Wert „Ja“ ist, wird der

Schatten reduziert Farbe: Wenn keine Farbe festgelegt ist, verwendet der Browser die Standardfarbe, aber die Standardfarbe jedes Browsers ist unterschiedlich, insbesondere unter dem Webkit-Kernel sind Safari- und Chrome-Browser farblos, dh transparent. Es wird empfohlen, diesen Parameter nicht wegzulassen.

Boxrandradius Randradius (muss vom Browser bestimmt werden)

Die Abkürzung für Randradius ist ähnlich 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 schreibt man „Webkit“

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:25px;

-webkit-border-right-left-radius:45px;

Wie schreibe ich „Firefox“

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:25px ;

-moz-border-radius-bottomright:45px;

Das Obige ist die Sammlung allgemeiner CSS3-Attribute. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn)!