背景と枠線のマルチレイヤー border_html/css_WEB-ITnose

デザインシーン

---

• 要素に複数レイヤーの境界線を追加します
• 要素に二重レイヤーの境界線を追加します

ボックス-shadow ソリューション

---

.box {    width: 200px;    height: 80px;    background-color: #fafafa;    box-shadow: 0 0 0 10px #666;}

説明

• 正の拡張半径 + 2 つのゼロ オフセット + ゼロ ブラー 値の投影結果 は実線のように見えますが、

• それを実装するために border 属性を使用すればよいのではないかと言う人もいるかもしれません。複数の境界線を実装したい場合、border 属性を使用するのは明らかに不適切です。box-shadow の利点は、カンマ区切りの構文をサポートし、任意の数のシャドウ

注意

影の動作は境界線と完全に一致しません。レイアウトには影響しませんし、ボックス サイズ属性の影響も受けません。
• border-radius 属性の効果
の影響を受けます。投影によって作成された偽の境界線は、要素の外側の円に表示されます。
• ホバーやクリックなどのマウスイベントには反応しません。これは非常に重要ですが、inset キーワードを box-shadow 属性に追加すると、要素の内側の円に影を描くことができます。現時点では、目的の効果を実現するには、内側の境界線を追加する必要があることに注意してください

アウトライン (ストローク) ソリューション

---

.box {    width: 200px;    height: 80px;    background-color: #fafafa;    border: 10px solid #666;    outline: 1px solid #e5e5e5;}

利点

境界線のスタイルは柔軟ですが、box-shadow は実線の境界線のみをシミュレートできます
単純な継ぎ目効果を実現したい場合は、
• outline-offset を追加するだけです 属性は

です。

は 2 層境界線のシナリオでのみ使用されることに注意してください。
border
• border border -radius は角を丸める効果がありますが、境界線 outline は影響を受けません。境界線は直角に表示されます

《CSSの秘密》