border:none と border:0_Basic チュートリアルの違い

1. border:none
border-style の略語
Chrome で要素を検査すると、次の結果が表示されます

コードをコピー コードは次のとおりです。

element.style {
border: なし;
border-top-style: なし;
border-right-style:なし;
border -bottom-style: none;
border-left-style: none;
border-width: 初期;
border-color: 初期;
}

firebug を使用して Firefox で要素を表示すると、次の結果が表示されます。

コードをコピー コードは次のとおりです。

element.style {
border: middle none;
}

medium の値に注意してください
>2. border:0
border-width の略語
クロムで要素を検査すると、次の結果が表示されます

コードをコピー コードは次のとおりです。

element.style {
border: 0;
border-top-width: 0px;
border-right-width: 0px;
ボーダー下幅: 0px;
ボーダー左幅: 0px;
ボーダースタイル: 初期;
ボーダーカラー: 初期;
}

firebug を使用して Firefox で要素を表示すると、次の結果が表示されます。

コードをコピーします コードは次のとおりです。

element.style {
border: 0 none;}

border の違いに注意してくださいfirebug の :none と border:0 について
以下は詳細を説明する例です

コードをコピー コードは次のとおりです。

「ボーダー: 0」および「ボーダー幅: 3px」

"境界線: 0」および「境界線のスタイル: 破線」

「境界線: なし」および「境界線の幅: 3px」

「境界線: なし」および「境界線のスタイル: 破線」
>

興味のある友人は、上記のコードをコピーして、このブラウザで試してみてください:
テスト結果:
1. .zerotest .setwidth
border-width: 3px が定義されていますが、border-style:none,したがって、境界線はありません (IE7 では、border:0 解析に関連する 3 ピクセルの境界線が表示されます。これについては後述します)
2. .zerotest .setstyle
border-style: dumped が定義されていますが、 , border -width:0 なので枠線はありません
3. .nonetest .setwidth
border-width:3px が定義されていますが、border-style:none なので枠線はありません（IE7 では枠線はありません）
>4. .nonetest .setstyle
はborder-styleを定義します: 破線のborder-styleはデフォルト値medium、border-colorはデフォルト値blackであるため、3ピクセルの黒い破線ボックスが表示されます(IE7では1ピクセル) )
1 と 4 は統合できます。 IE7 では、
border:0 は border-width:0 として解析され、
border:none は border-style:none として解析される
ことが解析されています。標準ブラウザを見てください。
border:0 は border:none よりも余分な border-width:0 をレンダリングします。これが、border:none のパフォーマンスが border:0 よりも高い理由です。
したがって、Design Hive では border の使用を推奨しています。 :none はボーダーレス効果を実現します。