Maison > Article > interface Web > Quelles nouvelles propriétés sont ajoutées à CSS3
Quelles nouvelles propriétés sont ajoutées à CSS3
- 清浅original
- 2018-11-26 17:26:3018444parcourir
Les nouvelles propriétés de CSS3 incluent : 1. Ombre du texte ; 2. Dégradé d'arrière-plan ; 3. Transparence des couleurs ; 4. Rotation des éléments ; 6. Changement de police ;
L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, version css3.
Aujourd'hui, je vais vous présenter les nouveaux attributs de CSS3, qui ont une certaine valeur de référence. J'espère que cela sera utile à tout le monde
L'émergence de la dernière version de CSS3 facilite la conception Web. , bien que ce ne soit pas le cas. Tous les navigateurs le prennent en charge. Cependant, en raison de l'évolution rapide de la technologie et de la standardisation modulaire de CSS3, tous les navigateurs implémentent actuellement une prise en charge complète de CSS3. Je pense que CSS3 et HTML5 deviendront l'avenir d'Internet dans un avenir proche. Je présenterai CSS3 en détail dans le futur. article. Nouvelles fonctionnalités dans
Problèmes de compatibilité des navigateurs :
Firefox nécessite le préfixe -moz-.
Chrome et Safari nécessitent le préfixe -webkit-.
[Cours recommandés : Tutoriel CSS3]
Ombre de texte CSS3
<div style="text-shadow: 5px 5px 5px #444;">这是一行文字</div>
Effet de dégradé d'arrière-plan CSS3
La propriété de dégradé linéaire en CSS3 n'est disponible que dans Safari 4 et Chrome jusqu'à présent et pris en charge dans Firefox 3.6.
dc4bdbf87cf6b13b96a0e690e9f65b5a16b28748ea4df4d9c2150843fecfba68
Les effets de couleur CSS3
ont désormais l'opacité
rgb en CSS C'est utilisé pour définir la couleur de l'élément, mais dans CSS3, il existe une nouvelle opération permettant de définir l'opacité de la couleur. RVB a été converti en rgba, ce qui simplifie la façon de contrôler l'opacité de l'élément.
<div style="width:50px;height:50px;background-color:rgba(123,123,123,0.4);"></div>
Transformation CSS3 (rotation des éléments)
CSS3 a récemment introduit l'attribut de transformation pour Faire pivoter les éléments
<div style="width:50px;height:50px;background-color: pink;-webkit-transform:rotate(40deg); ">旋转</div>
Disposition multi-colonnes CSS3
sur chaque page Web Doit être divisé en colonnes et ajusté pour s'adapter à différents navigateurs. Les propriétés de mise en page multi-colonnes utilisées dans CSS3 spécifient simplement le nombre de colonnes requis, puis les créent. L'attribut
column-count spécifie que les éléments doivent être séparés. Nombre de colonnes
div.content{
width:210px;
border:1px solid #ccc;
/*将当前内容分成3列*/
-webkit-column-count:3;
-webkit-column-gap:25px;/*列之间的间隔*/
-webkit-column-rule:1px solid #ccc;/*规定列之间的宽度、样式和颜色规则*/
}
</style>
</head>
<body>
<div class="content">
php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
</div>
Polices Web CSS3
CSS3 peut également intégrer des polices personnalisées. À l'origine, les polices dépendent du système client. Les pages Web ne peuvent restituer que les polices prises en charge par le navigateur ou l'ordinateur client. Cependant, en utilisant l'attribut @font-face, vous pouvez utiliser des polices dans d'autres emplacements
@font-face
{
font-family: myFirstFont;
src: url(Sansation-Italic.ttf)
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>WWWWWW</div><.>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!