Liste des nouvelles fonctionnalités de CSS3-tutoriel CSS-php.cn

Je suis exposé à CSS3 depuis si longtemps. Je l'utilise toujours directement lorsque j'en ai besoin, mais je ne l'ai pas résumé correctement, alors faisons le tri ici.

Bordure CSS3 :

Bordure arrondie :

Clé : 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>

Copier après la connexion

Bordure-ombre CSS3 :

Clé : box-shadow

Syntaxe : Sélecteur d'objet {box-shadow :[mode de projection,] Décalage de l'axe X, Décalage de l'axe Y[, rayon de flou d'ombre][, Rayon d'expansion de l'ombre ][,shadow color]}　

Méthode de projection : Ce paramètre est facultatif. Si aucune valeur n'est définie, la méthode de projection par défaut est l'ombre extérieure ; si la valeur unique "encart" est prise, la projection est l'ombre intérieure

Décalage X : décalage horizontal de l'ombre, sa valeur peut être positive ou négatif . Si la valeur est positive, l'ombre est du côté droit de l'objet. Lorsque la valeur est négative, l'ombre est du côté gauche de l'objet.

Y-offset : décalage vertical de l'ombre, sa valeur peut également être positive ou négative. Si c'est une valeur positive, l'ombre est en bas de l'objet. Lorsqu'il s'agit d'une valeur négative, l'ombre est en haut de l'objet.

Rayon de flou de l'ombre : Ce paramètre est facultatif, mais ; sa valeur ne peut être que positive. Si Lorsque sa valeur est 0, cela signifie que l'ombre n'a pas d'effet de flou. Plus la valeur est grande, plus le bord de l'ombre est flou

Rayon d'expansion de l'ombre : Ce paramètre est ; facultatif, et sa valeur peut être positive ou négative. Si la valeur est positive, toute l'ombre sera agrandie, sinon si la valeur est négative, elle sera réduite

Couleur de l'ombre : Ce paramètre ; est facultatif. Si vous ne définissez pas la couleur, le navigateur utilisera la couleur par défaut, mais la couleur par défaut de chaque navigateur est incohérente, notamment la couleur transparente sous les navigateurs Safari et Chrome sous le noyau webkit, et la couleur noire sous Firefox/Opera ( a été vérifiée), il est recommandé de ne pas omettre ce paramètre.

Image de bordure CSS3 :

Clé : -webkit-border-image

Par exemple :

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

Copier après la connexion

Arrière-plan CSS3 :

l'attribut background-size spécifie la taille de l'image d'arrière-plan

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

Copier après la connexion

L'attribut background-origin précise la zone de positionnement de l'image d'arrière-plan

CSS3新特性罗列

p
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

Copier après la connexion

Image d'arrière-plan multiple CSS3

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

Copier après la connexion

Effet de texte CSS3

Ombre de texte CSS3

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

Copier après la connexion

Retour à la ligne CSS3

p {word-wrap:break-word;}

Copier après la connexion

Dans la nouvelle @font-face En règle générale, vous devez définir le prénom de la police (comme myFirstFont), puis pointer vers le fichier de police.

Pour utiliser une police pour un élément HTML, référencez le nom de la police (myFirstFont) via l'attribut font-family :

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

Copier après la connexion

Transformation 2D CSS3

Traduire : traduire

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

Copier après la connexion

Rotation : faire pivoter

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

Copier après la connexion

Échelle : scale

Grâce à la méthode scale(), la taille de l'élément augmentera ou diminuera, en fonction de la largeur donnée (axe X) et hauteur (axe Y) ) Paramètres :

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

Copier après la connexion

Retourner : inclinaison

Grâce à la méthode skew(), l'élément est retourné par l'angle donné, selon les paramètres donnés de la ligne horizontale (axe X) et de la ligne verticale (axe Y) :

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

Copier après la connexion

Conversion 3D CSS3

rotateX()

Rotation le long de l'axe X

rotateY()

Rotation le long de l'axe Y

Transition CSS3

Avec CSS3, nous pouvons ajouter des effets (transitions fluides) aux éléments lorsqu'ils se transforment d'un style à un autre sans utiliser d'animations Flash ou JavaScript.

Ajouter des transitions en largeur, en hauteur et en transition :

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

Copier après la connexion

Résumé :

Vous devez donner un état de départ et un état de fin,

puis ajouter une transition à p : temps de transition large, temps de transition élevé, temps de transition de transition

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

Copier après la connexion

Animation CSS3

Définir l'action @keyframes

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

Copier après la connexion

Définir la classe d'action

.myaction{
　　animation:myfirst 5s;
}

Copier après la connexion

Ajouter une classe d'action à p

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

Copier après la connexion

Remarque :

Syntaxe :

animation:name duration timing-function delay iteration-count direction

Copier après la connexion

name : le nom de @keyframes

durée : précise le temps nécessaire pour terminer le animation, Mesurée en secondes ou millisecondes.

fonction de synchronisation : Spécifie la courbe de vitesse de l'animation.

timing-function的值	描述
linear	匀速
ease	慢快慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始和结束
cubic-bezier(n,n,n,n)	在cubic-bezier函数中自己的值，从0到1

delay：动画开始之前的延迟，秒。

iteration-count:规定动画播放的次数：具体数值或infinite（无限次）。

direction:规定是否轮流反向播放动画。normal正常播放，alternate轮流反向播放。

CSS3多列：

创建多个列对文本进行布局

p
{
-moz-column-count:3;     /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

Copier après la connexion

CSS3用户界面

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

Copier après la connexion

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

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