Différences entre border:none et border:0_Basic Tutorial

1. border:none
Abréviation de border-style
Voir les résultats suivants dans l'élément de révision Chrome

Copiez le code Le code est le suivant :

element.style {
border: none;
border-top-style: none;
border-right-style: none;
border- bottom-style : aucun ;
border-left-style : aucun;
border-width : initial;
border-color : initial;
}

dans Firefox Si vous utilisez Firebug pour afficher les éléments, vous verrez les résultats suivants :

Copiez le code Le code est la suivante :

element .style {
border: medium none;
}

Faites attention à la valeur moyenne
2. border :0
abréviation de border-width
revue en chrome L'élément voit les résultats suivants

Copiez le codeLe le code est le suivant :

element.style {
border : 0;
border-top-width : 0px;
border-right-width : 0px;
border-bottom-width : 0px;
border-left-width : 0px;
border-style : initial;
border-color : initial;
}

Si vous utilisez Firebug pour afficher l'élément dans Firefox, vous verrez les résultats suivants :

Copier le code Le code est le suivant :

element.style {
border: 0 none;
}

Faites attention à la différence entre border:none et border:0 dans firebug
Ce qui suit est un exemple à expliquer en détail

Copier le code Le code est le suivant :

< div class="setwidth">
"Bordure : 0" et "border-width : 3px"

"Bordure : 0" et "border-style: dashed"

"Bordure : aucune" et "border-width : 3px"

"Bordure : aucune" et " border-style: dashed"

Pour ceux qui sont intéressés Vous pouvez copier le code ci-dessus et l'essayer dans ce navigateur :
Résultats du test :
1. .zerotest .setwidth
Bien que border-width : 3px soit défini, border-style : none donc il n'y a pas de bordure (IE7 Une bordure de 3 pixels sera affichée, ce qui est lié à border:0 analyse. Sera discuté ci-dessous)
2. .zerotest .setstyle
Bien que border-style: dashed soit défini, border-width:0 donc il n'y a pas de frontière
3 .nonetest .setwidth
Bien que ce soit. est défini border-width : 3px, mais border-style : none donc il n'y a pas de bordure (pas de bordure sous IE7)
4. .nonetest .setstyle
définit border-style : pointillé border-style comme valeur par défaut medium border-color C'est la valeur par défaut black, donc un cadre pointillé noir de 3 pixels sera affiché (un pixel sous IE7)
Sur la base de 1 et 4, on peut analyser que sous IE7,
border : 0 est analysé comme border-width:0
border:none est analysé comme border-style:none
Jetons un coup d'œil au navigateur standard
border:0 affiche une border-width:0 de plus que border :none, c'est pourquoi les performances de border:none sont meilleures que border:0 height
Design Hive recommande donc d'utiliser border:none pour obtenir un effet sans bordure