Maison  >  Article  >  interface Web  >  Comment utiliser la propriété d'apparence CSS3 ?

Comment utiliser la propriété d'apparence CSS3 ?

青灯夜游
青灯夜游original
2019-02-20 13:22:065152parcourir

L'attribut d'apparence CSS3 est utilisé pour modifier le style par défaut de l'élément et changer l'apparence de l'élément.

Comment utiliser la propriété d'apparence CSS3 ?

Attribut d'apparence CSS3

Fonction : L'attribut apparence permet de créer un élément Ressemble à des éléments d'interface utilisateur standard.

Syntaxe :

appearance: normal|icon|window|button|menu|field;

Valeur de l'attribut :

Quantity normal : restitue l'élément normalement

● Icône : présente l'élément sous forme d'une petite image.

● fenêtre : présente les éléments sous forme de fenêtre.

● Bouton : Présente l'élément sous forme de bouton.

● Menu : présente la sélection d'éléments en tant que paramètre d'option utilisateur.

● Champ : Présente l'élément sous forme de champ de saisie.

Remarque : IE et Opera ne prennent pas en charge l'attribut d'apparence ; Firefox doit ajouter le préfixe -moz- pour prendre en charge l'attribut -moz-apparence ; Safari et Chrome doivent ajouter le préfixe ; -webkit- pour prendre en charge l'attribut -webkit -apparence.

Exemple d'utilisation de l'attribut d'apparence CSS3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style> 
.butto
{
padding:10px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
</style>
</head>
<body>
<div class="butto">测试文本--butto</div>
</body>
</html>

Rendu :

Comment utiliser la propriété dapparence CSS3 ?

Explication : L'attribut d'apparence n'étant pas encore devenu un standard, lors du rendu, chaque navigateur fonctionne toujours indépendamment et ne peut pas encore atteindre un standard unifié. Par conséquent, vous obtiendrez différents effets de rendu dans différents navigateurs.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn