css - 要素の境界線の色は背景色の影響を受けますか?

Question

W3Schools で CSS の概念を再学習しています。

この役立つウェブサイトに書かれている内容を引用します。

• ボーダー- パディングとコンテンツを囲むボーダー。境界線はボックスの背景色の影響を受けます

http://www.w3schools.com/css/css_boxmodel.asp

しかし、境界線の色を指定しないと (テーブルでテストしています)、表示されません。

では、W3Schools は何を言おうとしているのでしょうか。

Answer 1

しかし、境界線の色を指定しないと (テーブルでテストしています)、表示されません。

境界線を指定しない場合、描画する境界線はありません。あなたが引用した声明がどのように関連するかわかりません。

とにかく、当面の実際の質問に...

要素の境界線の色は背景色の影響を受けますか?

次の場合のみです。

• 境界線が完全に塗りつぶされていない、または不透明ではない。

• background-clipそうではありませんborder-box（デフォルトではそうです）

シースルー領域のある境界線の画像、または半透明の色 (rgba()またはhsla()色など) の場合、背景がある場合は境界線の下に表示されます。

またはの場合、境界線がイメージまたは半透明の色であるbackground-clipかどうかに関係なく、境界線は背景と重なることさえありません。padding-boxcontent-box

これらは達成するために努力しなければならない珍しいシナリオなので、なぜ W3Schools がわざわざそれを指摘するのかわかりません。とはいえ、W3Schoolsがなぜそのようなケースなのかをわざわざ説明しないことには驚かない。記録のために、そのサイトはあなたが思っているほど素晴らしいものではありません。理由については、質問に対するコメントを参照してください。

Answer 2

アルファ値または透明な色または単色でない境界線の色がある場合、ボックスの色が透けて見えます。
http://jsfiddle.net/HerrSerker/WrZRL/

div {
    background-color: black;
    border: 10px solid rgba(255,255,0,0.5);
    width: 100px;
    height: 100px;
    margin: 10px;
}
div.d2 {
    background-color: red;
}

Answer 3

透過性を無視しています...

一部の古いブラウザーでは、境界線の色 (明示的に設定されていない場合) が、特定border-styleの s (溝、尾根、インセット、アウトセットなど) の背景の色の影響を受ける可能性があります。たとえば、古いバージョンの Chrome では、ベベル ボーダー スタイルのコーナーに基づいて (奇妙なことに) 中間色が表示されていbackground-colorましたが、これはほとんど目立たず、border-color設定とは無関係でした。(これはおそらくバグであり、後のバージョンで修正されています。)

border-styleが "double" に設定されている場合、はbackground-color境界線の内側に表示されます。

しかし、w3schools のやり方が間違っている気がします...

境界線は、ボックスの背景色の影響を受けます。

が明示的に設定されていない場合、要素の色は境界線の色に実際に影響します。border-colorただし、これはブラウザに依存するため、信頼できません。Chrome では、明示的に設定されていない場合、点線、破線、実線、および二重のborder-colorと同じになります。colorborder-style

---

border-style境界線が表示されるかどうかは、主に("none" または "hidden") とに依存します。境界線の色が背景色と一致しない限り、border-width通常は- には依存しません。この場合、境界線がないように見えます。border-color

Answer 4

選択した組み合わせによって異なりますが、境界線が明るい場合は両方が表示されますボディの色が明るい場合は境界線が見えにくくなるため、私の意見では明るい境界線を選択する方が良い..

Answer 5

境界線の色と背景色が同じ場合、境界線は表示されません。