Was sind die neuen Attribute in CSS3?

Zu den neuen Eigenschaften von CSS3 gehören: Zeilenumbruch, Wortumbruch, Textschatten, Rahmenradius, Boxschatten, Rahmenbild, Hintergrundgröße, Transformation, Übergang usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

css3 neue Attribute

1. CSS3-Texteffekte:

• hanging-punctuation: Gibt an, ob Satzzeichen außerhalb des Drahtmodells liegen.
  

• punctuation-trim: Gibt an, ob Satzzeichen abgeschnitten werden sollen.

• text-align-last: Legen Sie fest, wie die letzte Zeile oder die Zeile unmittelbar vor einem erzwungenen Zeilenumbruch ausgerichtet werden soll.

• text-emphasis: Wendet eine Hervorhebungsmarkierung und die Vordergrundfarbe der Hervorhebungsmarkierung auf den Text des Elements an.

• text-justify: Gibt die Ausrichtungsmethode an, die verwendet wird, wenn text-align auf „justify“ eingestellt ist.

• text-outline: Gibt die Umrisse des Textes an.

• Textüberlauf: Gibt an, was passiert, wenn Text das enthaltende Element überläuft.

• Textschatten: Schatten zum Text hinzufügen.

• text-wrap: Gibt Zeilenumbruchregeln für Text an.

• Wortumbruch: Gibt Zeilenumbruchregeln für nicht-chinesischen, japanischen und koreanischen Text an.

• Wortumbruch: Ermöglicht das Teilen langer unteilbarer Wörter und das Umbrechen in die nächste Zeile.

2. CSS3-Rand:

• Grenzradius: CSS3 abgerundeter Rand.

• box-shadow: Wird verwendet, um der Box Schatten hinzuzufügen.

• border-image: CSS3-Randbild, Sie können Bilder zum Erstellen von Rändern verwenden.

3. CSS3-Hintergrund:

• background-size: Attribut gibt die Größe des Hintergrundbilds an.

• background-origin: Das Attribut gibt den Positionierungsbereich des Hintergrundbilds an.

• background-clip: Gibt den Zeichenbereich des Hintergrunds an.​

(Lernvideo-Sharing: CSS-Video-Tutorial)

4. CSS3-Transformation:

• transform wendet 2D- oder 3D-Transformation auf Elemente an.

• transform-origin ermöglicht es Ihnen, die Position des zu transformierenden Elements zu ändern.

• transform-style gibt an, wie verschachtelte Elemente im 3D-Raum angezeigt werden.

• Perspektive gibt den perspektivischen Effekt von 3D-Elementen an.

• perspective-origin gibt die untere Position des 3D-Elements an.

• backface-visibility definiert, ob das Element sichtbar ist, wenn man nicht auf den Bildschirm schaut.

5. CSS3-Übergang:

Fügen Sie Effekte zu Elementen hinzu, wenn sie von einem Stil in einen anderen wechseln.

• Übergang: Abkürzungsattribut, mit dem vier Übergangsattribute in einem Attribut festgelegt werden.

• transition-property: Gibt den Namen der CSS-Eigenschaft an, auf die der Übergang angewendet wird.

• Übergangsdauer: Definieren Sie, wie lange der Übergangseffekt dauert. Der Standardwert ist 0.

• transition-timing-function: Gibt den zeitlichen Verlauf des Übergangseffekts an. Der Standardwert ist „einfach“.

• Übergangsverzögerung: Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.

6. CSS3-Animation: Durch CSS3 können wir Animationen erstellen, die auf vielen Webseiten animierte Bilder, Flash-Animationen und JavaScript ersetzen können.

• @keyframes: Gibt die Animation an.

• animation: Abkürzungseigenschaft für alle Animationseigenschaften, mit Ausnahme der Eigenschaft „animation-play-state“.

• Animationsname: Gibt den Namen der @keyframes-Animation an.

• animationsdauer: Gibt die Sekunden oder Millisekunden an, die die Animation benötigt, um einen Zyklus abzuschließen. Der Standardwert ist 0.

• animation-timing-function: Gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „einfach“.

• animation-delay: Gibt an, wann die Animation startet. Der Standardwert ist 0.

• animation-iteration-count: Gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1.

• animation-direction: Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt wird. Der Standardwert ist „normal“.

• animation-play-state: Gibt an, ob die Animation läuft oder pausiert. Der Standardwert ist „läuft“.

• animation-fill-mode: Gibt den Zustand außerhalb der Objektanimationszeit an.

7. CSS3 mehrere Spalten:

• column-count: Geben Sie die Anzahl der Spalten an, durch die das Element geteilt werden soll.

• column-fill: Geben Sie an, wie die Spalte gefüllt werden soll

• column-gap: Geben Sie die Lücke zwischen den Spalten an

• column-rule: Abkürzung für alle Column-Rule-*-Attribute

• column - Regelfarbe: Geben Sie die Farbe der Grenze zwischen zwei Spalten an

• column-rule-style: Geben Sie den Stil der Grenze zwischen zwei Spalten an

• column-rule-width: Geben Sie die Dicke der Grenze zwischen zwei an columns

• columns-span: Geben Sie an, wie viele Spalten das Element umfassen soll

• column-width: Geben Sie die Breite der Spalte an

• columns: Abkürzung für die Einstellung von Spaltenbreite und Spaltenanzahl

8. CSS3-Benutzeroberfläche:

• resize: Das Attribut gibt an, ob die Elementgröße vom Benutzer angepasst werden kann.

• box-sizing: Mit der Eigenschaft können Sie genau definieren, was genau in einen bestimmten Bereich passt.

• outline-offset: Die Eigenschaft versetzt den Umriss und zeichnet den Umriss über den Rand des Rahmens hinaus.

• Aussehen: Ermöglicht es Ihnen, ein Element wie ein Standard-UI-Element aussehen zu lassen.

• Symbol: Bietet Erstellern die Möglichkeit, Elemente auf ihre Symboläquivalente festzulegen.

• nav-down: Gibt an, wohin bei Verwendung der Pfeil-nach-unten-Navigationstaste navigiert werden soll.

• nav-index: Geben Sie die Reihenfolge der Tabs eines Elements an.

• nav-left: Gibt an, wohin mit den Navigationstasten mit dem Pfeil nach links navigiert werden soll.

• nav-rechts: Gibt an, wohin mit den Pfeil-nach-rechts-Navigationstasten navigiert werden soll.

• nav-up: Gibt an, wohin bei Verwendung der Pfeil-nach-oben-Navigationstaste navigiert werden soll.

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWas sind die neuen Attribute in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!