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!
