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
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('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* 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('.myaction');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中文网！
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
