Quelles nouvelles propriétés sont ajoutées à CSS3
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.
<div style="width:200px;height:100px; background-color: #1a82f7; background-repeat: repeat-x; background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "></div>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code)
Jun 28, 2022 pm 01:39 PM
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !
Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code)
Jul 19, 2022 am 11:28 AM
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !
Comment masquer des éléments en CSS sans prendre de place
Jun 01, 2022 pm 07:15 PM
Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.
Comment implémenter des bordures en dentelle en CSS3
Sep 16, 2022 pm 07:11 PM
En CSS, vous pouvez utiliser l'attribut border-image pour réaliser une bordure en dentelle. L'attribut border-image peut utiliser des images pour créer des bordures, c'est-à-dire ajouter une image d'arrière-plan à la bordure. Il vous suffit de spécifier l'image d'arrière-plan comme style de dentelle ; largeur de la bordure de l'image vers l'intérieur. Indique si le début est répété ;".
Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur !
Jun 10, 2022 pm 01:00 PM
Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.
Comment agrandir l'image en cliquant sur la souris en CSS3
Apr 25, 2022 pm 04:52 PM
Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transform : échelle (grossissement de l'axe x, grossissement de l'axe y);}".
L'effet d'animation CSS3 a-t-il une déformation ?
Apr 28, 2022 pm 02:20 PM
L'effet d'animation en CSS3 a une déformation ; vous pouvez utiliser "animation : attribut d'animation @keyframes ..{..{transform : attribut de transformation}}" pour obtenir un effet d'animation de déformation. L'attribut d'animation est utilisé pour définir le style d'animation et le. L'attribut transform est utilisé pour définir le style de déformation.
Comment définir la vitesse de rotation de l'animation en CSS3
Apr 28, 2022 pm 04:32 PM
En CSS3, vous pouvez utiliser l'attribut "animation-timing-function" pour définir la vitesse de rotation de l'animation. Cet attribut est utilisé pour spécifier comment l'animation terminera un cycle et définir la courbe de vitesse de l'animation. La syntaxe est "element {. fonction de synchronisation d'animation : valeur de l'attribut de vitesse ;}".
