Heim > Artikel > Web-Frontend > Liste der neuen Funktionen von CSS3

Liste der neuen Funktionen von CSS3

高洛峰Original: 2017-02-23 10:33:551421Durchsuche

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:

CSS3-Hintergrund:

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 an

p
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

CSS3新特性罗列

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 Wrap

h1
{
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: drehen

p
{
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: Skalierung

Durch 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: skew

Durch 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-Animation

transition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]

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(&#39;.myaction&#39;);

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中文网！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-MischmodiNächster Artikel：CSS-Mischmodi

In Verbindung stehende Artikel

Mehr sehen