Liste der neuen Funktionen von CSS3-CSS-Tutorial-php.cn

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>

Nach dem Login kopieren

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 */
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

CSS3-Texteffekt

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

Nach dem Login kopieren

CSS3-Textschatten

CSS3 Word Wrap

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

CSS3 2D-Transformation

<style> @font-face{font-family: myFirstFont;src: url(&#39;Sansation_Light.ttf&#39;),
     url(&#39;Sansation_Light.eot&#39;); /* IE9+ */}p{font-family:myFirstFont;}</style>

Nach dem Login kopieren

Ü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 */
}

Nach dem Login kopieren

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 */
}

Nach dem Login kopieren

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 */
}

Nach dem Login kopieren

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 */
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]

Nach dem Login kopieren

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;}
}

Nach dem Login kopieren

Aktionsklasse zu p hinzufügen

.myaction{
　　animation:myfirst 5s;
}

Nach dem Login kopieren

Hinweis:

Syntax:

$("...").addClass(&#39;.myaction&#39;);

Nach dem Login kopieren

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

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

CSS3用户界面

p
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}

Nach dem Login kopieren

CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点，需要好好掌握。

更多CSS3新特性罗列相关文章请关注PHP中文网！