Heim >Web-Frontend >CSS-Tutorial >Liste der neuen Funktionen von CSS3
Ich bin CSS3 schon so lange ausgesetzt, dass ich es immer direkt verwende, wenn ich es verwenden muss, aber ich habe es nicht richtig zusammengefasst, also lass es uns hier klären.
CSS3-Rahmen:
Abgerundeter Rand:
Schlüssel: border-radius
<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; width:350px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; } </style> </head> <body> <div>圆角边框</div> </body> </html>
CSS3 border-shadow:
Schlüssel: box-shadow
Syntax: Objektauswahl {box-shadow:[Projektionsmodus,] X-Achsen-Versatz, Y-Achsen-Versatz[, Schattenunschärferadius][, Schattenerweiterungsradius ][,Schattenfarbe]}
Projektionsmethode: Dieser Parameter ist optional. Wenn kein Wert festgelegt ist, ist die Standardprojektionsmethode „Außenschatten“. Wenn der eindeutige Wert „Einsatz“ verwendet wird, ist die Projektion „Innenschatten“. negativ. Wenn der Wert positiv ist, befindet sich der Schatten auf der rechten Seite des Objekts. Wenn der Wert negativ ist, befindet sich der Schatten auf der linken Seite des Objekts. sein Wert kann auch positiv oder negativ sein. Bei einem positiven Wert liegt der Schatten am unteren Rand des Objekts. Bei einem negativen Wert befindet sich der Schatten am oberen Rand des Objekts.
Schattenunschärferadius: Dieser Parameter ist optional sein Wert kann nur positiv sein. Wenn der Wert 0 ist, bedeutet dies, dass der Schatten keinen Unschärfeeffekt hat optional, und sein Wert kann positiv oder negativ sein. Wenn er positiv ist, wird der gesamte Schatten erweitert, andernfalls wird er reduziert, wenn der Wert negativ ist.
Schattenfarbe: Dieser Parameter ist optional. Wenn Sie die Farbe nicht festlegen, verwendet der Browser die Standardfarbe, aber die Standardfarbe jedes Browsers ist inkonsistent, insbesondere die transparente Farbe unter den Browsern Safari und Chrome unter dem Webkit-Kernel und die schwarze Farbe unter Firefox/Opera ( überprüft wurde), wird empfohlen, diesen Parameter nicht wegzulassen.
CSS3-Rahmenbild: Schlüssel: -webkit-border-image
Zum Beispiel:
p { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }
background-size-Attribut gibt die Größe des Hintergrundbilds an
Das Attribut „background-origin“ gibt den Positionierungsbereich des Hintergrundbilds anp { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }Mehrfaches CSS3-Hintergrundbild
p { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }CSS3-Texteffekt
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
CSS3-Textschatten
CSS3 Word Wraph1 { text-shadow: 5px 5px 5px #FF0000; }Im neuen @font-face In der Regel müssen Sie den Vornamen der Schriftart definieren (z. B. myFirstFont) und dann auf die Schriftartdatei verweisen. Um eine Schriftart für ein HTML-Element zu verwenden, verweisen Sie über das Attribut „font-family“ auf den Namen der Schriftart (myFirstFont):
p {word-wrap:break-word;}CSS3 2D-Transformation
c9ccee2e6ea535a969eb3f532ad9fe89 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}531ac245ce3e4fe3d50054a55f265927
Übersetzen: übersetzen
Drehen: drehenp { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }Skalierung: SkalierungDurch die Scale()-Methode wird die Größe des Elements entsprechend der angegebenen Breite (X-Achse) vergrößert oder verkleinert. und Höhe (Y-Achse) ) Parameter:
p { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }Flip: skewDurch die skew()-Methode wird das Element gespiegelt um den angegebenen Winkel, gemäß den angegebenen Parametern für die horizontale Linie (X-Achse) und die vertikale Linie (Y-Achse):
p { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }CSS3 3D-Konvertierung
p { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }
rotateX()
Entlang der X-Achse drehen
rotateY()
Entlang der Y-Achse drehen
CSS3-Übergang
Mit CSS3 können wir Effekte (sanfte Übergänge) zu Elementen hinzufügen, wenn sie von einem Stil in einen anderen wechseln, ohne Flash-Animationen oder JavaScript zu verwenden.
Übergänge zu Breite, Höhe und Übergang hinzufügen:
Zusammenfassung:p { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }
Sie müssen einen Startzustand und einen Endzustand angeben,
und dann den Übergang zu p hinzufügen: breite Übergangszeit, hohe Übergangszeit, Übergangsübergangszeit
CSS3-Animationtransition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]
Aktion @keyframes festlegen
Aktionsklasse festlegen@keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }Aktionsklasse zu p hinzufügen
.myaction{ animation:myfirst 5s; }Hinweis: Syntax:
$("...").addClass('.myaction');Name: der Name von @keyframes Dauer: gibt die Zeit an, die zum Abschluss benötigt wird Animation, gemessen in Sekunden oder Millisekunden.
animation:name duration timing-function delay iteration-count direction
Timing-Funktion: Gibt die Geschwindigkeitskurve der Animation an.
delay:动画开始之前的延迟,秒。
iteration-count:规定动画播放的次数:具体数值或infinite(无限次)。
direction:规定是否轮流反向播放动画。normal正常播放,alternate轮流反向播放。
CSS3多列:
创建多个列对文本进行布局
p { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }
CSS3用户界面
p { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }
CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点,需要好好掌握。
更多CSS3新特性罗列 相关文章请关注PHP中文网!