Einige neue Funktionen von CSS3

background:rgba(254, 255, 200, 0.75);

Zum Beispiel sind die ersten drei Parameter, wie im obigen Code gezeigt, die drei Primärfarben R, G und B, und der Bereich liegt zwischen 0 und 255. Der vierte Parameter ist die Hintergrundtransparenz im Bereich von 0 bis 1, z. B. 0,5 für 50 % Transparenz. Mit diesem Attribut können wir im Browser einen durchscheinenden Glaseffekt wie bei Win7 erzielen.

CSS3-Beispielcode mit abgerundeten Ecken

/*FireFox-Syntax*/

-moz-border-radius: 6px 6px 6px 6px;

-moz-border-radius-topright: 6px; border-radius-bottomleft: 6px; 🎜> -webkit-border-top-right-radius: 6px;

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

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

/* CSS-Standardsyntax*/

border-radius :6px 6px 6px 6px;

border-top-right-radius: 6px

border-top-left-radius: 6px

border-bottom-right- radius: 6px;

border-bottom-left-radius: 6px; Wie im obigen Code gezeigt, können die vier Ecken durch eine Codezeile mit border-radius angegeben werden: 6px 6px 6px 6px, wobei die vier Parameter jeweils von links nach rechts darstellen: obere linke Ecke, obere rechte Ecke, untere rechte Ecke, untere linke Ecke. Sie können den Effekt jeder Ecke auch separat angeben, z. B. border-top-right-radius: 6px;.

Verlaufsfarbe

Hintergrund: -moz-linear-gradient(

Mitte oben,/* Koordinaten, an denen der Verlauf verläuft beginnt */

rgba(254, 216, 80, 0.75),/* Farbverlauf-Startfarbe*/

rgba(230, 125, 30, 0.75) 50%,/* Mittlerer Farbverlauf color */ www.2cto.com

rgba(254, 235, 121, 0.75)/* Gradient end color*/ ) scroll wiederholen 0 0 transparent;

Wie im obigen Code gezeigt , Mozilla Verwenden Sie das Tag -moz-linear-gradient, um lineare Verläufe darzustellen. Der erste Parameter stellt die Koordinate dar, an der der Farbverlauf beginnt. Dies kann ein Koordinatenwert oder ein Wert wie oben, unten, links, rechts, in der Mitte usw. sein. Die folgenden Parameter sind die Farbwerte des Farbverlaufs, die Anzahl ist unbegrenzt und sie werden durch Kommas getrennt. Jeder Farbwert kann eine normale Hexadezimalfarbe oder ein RGBA-Farbwert sein. Auf jede Farbe kann auch ein Prozentsatz oder eine Dezimalzahl zwischen 0 und 1 folgen, der den Anteil dieser Farbe am gesamten Farbverlauf angibt.

Webkit-Gradientensyntax

Hintergrund:-webkit-gradient(

linear,/ * Verlaufstyp linear*/

links oben,/* Koordinaten, wo der Verlauf beginnt*/

links unten,/* Koordinaten, wo der Verlauf endet*/

from(rgba ( 254, 216, 80, 0.75)),/* Verlaufsanfangsfarbe*/

to(rgba(254, 235, 121, 0.75)),/* Verlaufsendfarbe*/

color-stop(0.5,rgba(230, 125, 30, 0.75))/* Die mittlere Farbe des Farbverlaufs*/

)

scrollen wiederholen 0 0 transparent;

Webkit-Browser verwenden das Attribut -webkit-gradient, um Farbverläufe darzustellen. Der erste Parameter ist der Verlaufstyp, normalerweise linear. Der zweite Parameter ist die Koordinate, an der der Farbverlauf beginnt, genau wie der erste Parameter von Mozilla. Der dritte Parameter ist die Koordinate des Endes des Farbverlaufs. Die vierte und fünfte Farbe sind die Anfangs- und Endfarben des Farbverlaufs, bei denen es sich um hexadezimale Farbwerte oder RGBA-Farbwerte handeln kann. Es kann eine unendliche Anzahl endgültiger Farbstoppattribute geben, die nach den ersten fünf Parametern durch Kommas getrennt sind und die Verlaufsfarbe in der Mitte der Änderung angeben. Im Farbstopp-Attribut ist der erste Parameter der Anteil der Verlaufsfarbe, der eine Dezimalzahl von 0-1 oder ein Prozentsatz sein kann; der zweite Parameter ist der Farbwert des Verlaufs, der auch eine hexadezimale Farbe sein kann. Wert oder RGBA-Farbwert.

Transformation

Transformation ist nach dem linearen Farbverlauf ein weiterer Blockbuster. Wir verwenden normalerweise CSS und HTML. Es ist möglich, zu drehen oder zu neigen HTML-Elemente in einem bestimmten Winkel. Um das Element dreidimensionaler erscheinen zu lassen, müssen wir diesen Effekt in ein Bild umsetzen, was viele dynamische Anwendungsszenarien einschränkt. Die Einführung des Transform-Attributs ermöglicht Funktionen, die wir normalerweise mit Vektorzeichenmethoden wie SVG erreichen mussten, um sie mit nur einem einfachen CSS-Attribut zu erreichen. In CSS3 umfassen die Transformationseigenschaften hauptsächlich Rotationsdrehung, Skalierungsskalierung, Übersetzungskoordinatentranslation, Schrägkoordinatenneigung und Matrixmatrixtransformation. Werfen wir einen Blick darauf, wie jedes Attribut verwendet wird.

/*Webkit-Kernbrowser*/

-webkit-transform: rotation(-90deg);

- webkit -transform:scale(2);

-webkit-transform:scale(2, 1);

-webkit-transform: Translate(10px, 20px); -webkit-transform: skew(30deg, -10deg);

-webkit-transform: Matrix(1, -0,2, 0, 1, 0, 0);

/*Firefox-Browser*/

-moz-transform: rotation(-90deg);

-moz-transform: scale(2);

-moz-transform: scale(2, 1);

-moz-transform: Translate(10px, 20px);

-moz-transform: skew(30deg, -10deg );

-moz-transform: Matrix(1, -0,2, 0, 1, 0, 0);

/*Opera-Browser*/

-o - transform: rotation(-90deg);

-o-transform: scale(2);

-o-transform: scale(2, 1); -transform: Translate(10px, 20px);

-o-transform: skew(30deg, -10deg);

-o-transform: Matrix(1, -0,2, 0, 1 , 0, 0);

Der Rotationsattributcode ist sehr einfach. Das Rotationsattribut plus der Rotationswinkelparameter 45deg stellt eine Drehung um 45 Grad im Uhrzeigersinn dar. Wenn es um 45 Grad gegen den Uhrzeigersinn gedreht wird, beträgt es -45 Grad.

Ähnlich wie bei der Rotation wird das Skalierungsattribut durch das Schlüsselwort „scale“ plus den Skalierungsparameter implementiert. Wenn nur ein Parameter 2 vorhanden ist, bedeutet dies, dass die X-Achsen- und Y-Achsenrichtungen des HTML-Elements gleichzeitig um 2 vergrößert werden, und 0,5 bedeutet, dass es gleichzeitig um die Hälfte verkleinert wird. Wenn zwei Parameter von 2 und 3 gleichzeitig vorhanden sind, bedeutet dies, dass die X-Achse des HTML-Elements um 2 und die Richtung der Y-Achse um 3 vergrößert wird.

Wie der Name schon sagt, dient das Koordinatenübersetzungsattribut dazu, das HTML-Element um eine Anzahl von Pixeln in Richtung der X- und Y-Achse zu verschieben, was durch das Übersetzungsattribut implementiert wird. Die beiden letztgenannten Parameter stellen das Ausmaß der Verschiebung zur X-Achse bzw. Y-Achse dar.

Das Skew-Attribut ist auch eine nützliche Transformationsfunktion, die ein Objekt in einem bestimmten Winkel um die X- und Y-Achse neigen kann. Dies unterscheidet sich von der Drehung, bei der Rotate nur die Form des HTML-Elements ändert, während Skew die Form des HTML-Elements ändert. skew hat zwei Parameter, die die Neigung des HTML-Elements entlang der X- und Y-Achse darstellen.

Matrix, Sie haben richtig gelesen, es ist unsere übliche Matrixtransformation. Diese Transformation ist die Koordinatensystemtransformation, die wir in der analytischen Geometrie gelernt haben. Es hat sechs Parameter (a, b, c, d, e, f) und ist eine 3 × 3-Matrix, die die Transformationsmatrix der Koordinatentransformation darstellt. Damit können wir jede Koordinatensystemtransformation flexibel durchführen. Freunde, die interessiert sind, können das Lehrbuch zur analytischen Geometrie des Colleges oder die W3c-Definition und Beschreibung von Matrixänderungen in SVG lesen.

Zu den Browsern, die derzeit diese 5 Konvertierungsattribute unterstützen, gehören Safari 4+, Chrome 5+, Firefox 3.5+ und Opera10.5+. Alle IE-Browser unterstützen dieses Attribut nicht.