Maison > Article > interface Web > Liste des nouvelles fonctionnalités de CSS3

Liste des nouvelles fonctionnalités de CSS3

高洛峰original: 2017-02-23 10:33:551421parcourir

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>

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

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

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

Image d'arrière-plan multiple CSS3

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

Effet de texte CSS3

Ombre de texte CSS3

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

Retour à la ligne CSS3

p {word-wrap:break-word;}

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 :

c9ccee2e6ea535a969eb3f532ad9fe89 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}531ac245ce3e4fe3d50054a55f265927

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

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

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

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

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

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

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

Définir la classe d'action

.myaction{
　　animation:myfirst 5s;
}

Ajouter une classe d'action à p

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

Remarque :

Syntaxe :

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

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

CSS3用户界面

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

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

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Modes de fusion CSSArticle suivant：Modes de fusion CSS

Articles Liés

Voir plus