Unterschiede zwischen border:none und border:0_Basic Tutorial

1. border:none
Abkürzung für border-style
Sehen Sie sich die folgenden Ergebnisse im Chrome-Review-Element an

Kopieren Sie den Code Der Code lautet wie folgt:

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

in Firefox Wenn Sie Firebug zum Anzeigen der Elemente verwenden, werden die folgenden Ergebnisse angezeigt:

Kopieren Sie den Code Den Code ist wie folgt:

element .style {
border: medium none;
}

Achten Sie auf den mittleren Wert
2. border :0
Abkürzung von border-width
Überprüfung in Chrome Das Element sieht die folgenden Ergebnisse

Kopieren Sie den Code Das Der Code lautet wie folgt:

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;
}

Wenn Sie Firebug verwenden, um das Element in Firefox anzuzeigen, werden die folgenden Ergebnisse angezeigt:

Code kopieren Der Code lautet wie folgt:

element.style {
border: 0 none;
}

Achten Sie auf den Unterschied zwischen border:none und border:0 in Firebug
Im Folgenden finden Sie ein Beispiel zur ausführlichen Erläuterung

Code kopieren Der Code lautet wie folgt:

< div class="setwidth">
"Border: 0" und "border-width: 3px"

"Border : 0“ und „border-style: dashed“

"Border: none" und "border-width: 3px"

"Border: none" und " border-style: dashed"

Für Interessierte Sie können den obigen Code kopieren und in diesem Browser ausprobieren:
Testergebnisse:
1. .zerotest .setwidth
Obwohl border-width: 3px definiert ist, border-style: none, also gibt es keinen Rand (IE7) Es wird ein 3-Pixel-Rand angezeigt, was damit zusammenhängt to border:0 Parsing. Wird weiter unten besprochen)
2.Obwohl border-style: dashed definiert ist, border-width:0, also gibt es keinen Rand
3.Obwohl es definiert ist border-width: 3px, aber border-style: none, also gibt es keinen Rand (kein Rand unter IE7)
4. .nonetest .setstyle
definiert border-style: dashed border-style als Standardwert medium border-color Dies ist der Standardwert Schwarz, sodass ein 3 Pixel großer schwarzer gepunkteter Rahmen angezeigt wird (ein Pixel unter IE7)
Basierend auf 1 und 4 kann analysiert werden, dass unter IE7
Rahmen: 0 wird als border-width:0 geparst.
border:none wird als border-style:none geparst :none, weshalb die Leistung von border:none besser ist als die von border:0 height
Design Hive empfiehlt daher die Verwendung von border:none, um einen randlosen Effekt zu erzielen