Quelles nouvelles propriétés sont ajoutées à CSS3-tutoriel CSS-php.cn

Quelles nouvelles propriétés sont ajoutées à CSS3

清浅

Libérer： 2021-04-18 14:54:26

original

18488 Les gens l'ont consulté

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 ;

Quelles nouvelles propriétés sont ajoutées à CSS3

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>

Copier après la connexion

Image 23.jpg

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.

<div style="width:200px;height:100px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "></div>

Copier après la connexion

Image 24.jpg

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

<.> Image 26.jpg

Résumé : ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de comprendre les nouvelles propriétés de CSS3.

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!