境界線が赤くないのはなぜですか? CSS 境界線の問題のトラブルシューティング

境界線の色のトラブルシューティング: 赤ではない理由

要素に境界線を追加する場合、指定した色が正しく表示されない状況がよく発生します。は適用されません。 CSS を使用してこの問題を解決する方法は次のとおりです。

次のコード スニペットを検討してください。

<div>

この JSFiddle (http://jsfiddle.net/zeburrehman/aFzKy/151/) で示されているように、 )、border-color を次のように指定しても、DIV 要素の周囲の境界線は表示されないままになります。 red.

問題を理解する

デフォルトでは、ブラウザは、border-width と border-style をそれぞれ 0 と "none" に設定します。これは、境界線の色が定義されていても、それを表示するための可視境界線がないことを意味します。

解決策

境界線を表示して希望の色を適用するには、次のようにします。 border-width プロパティと border-style プロパティの両方を明示的に設定する必要があります。 border-width は境界線の太さを決定し、border-style は境界線の外観 (実線、破線など) を決定します。

これを実現する最も効率的な方法は、3 つの境界線プロパティをすべて 1 つに結合することです。宣言:

#box {
    border: 1px solid red;
}

border-width を 1px に設定し、border-style をsolid に設定することで、要素の周囲に 1 ピクセル幅の実線の境界線を定義し、その色を次のように指定します。 赤。この要約表記は、簡略化するために 3 つの個別の境界線プロパティを 1 行にまとめたものです。

以上が境界線が赤くないのはなぜですか? CSS 境界線の問題のトラブルシューティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。