Maison >interface Web >tutoriel CSS >Liste des nouvelles fonctionnalités de CSS3
Liste des nouvelles fonctionnalités de CSS3
- 高洛峰original
- 2017-02-23 10:33:551448parcourir
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
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('.myaction');
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中文网！