0

メインコンテナの左右が茶色の影になっているサイトを作ろうとしています。

これまでのところ、目標は達成しましたが、完全ではありません。つまり、両側に影ができますが、暗すぎます。影をもっと明るくしたい（Bloomingdales.comのWebサイトのようなもの）。

これが私のcssコードです、何か提案はありますか？

ありがとう！

.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409,  -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409,  -1px 0 2px #492409;   
box-shadow: 4px 0 2px  #492409,  -4px 0 2px #492409;
}
4

1 に答える 1

0

@Vlad Salingが指摘したように、css3はさまざまなボックスシャドウオプションをサポートしています。

このWebサイトには、ブラウザーがシャドウを計算する方法に関するいくつかの優れた情報があります。特に：

代替のrgba（[red]、[green]、[blue]、α）構文を使用して、CSSで色を指定できます。RGB値は10進数（0〜255）で書き込まれ、最後の属性は「アルファ」（不透明度）で、0（透明）から1（不透明）までの10進数です。0.5アルファは、50％透明なものを提供します。したがって、rgba（0、0、0、0.25）は、暗い灰色の上でも目立つように十分に暗いままである、色あせた黒い影を提供します。

問題を解決するには、色を明るい茶色に変更するか、ボックスの影の属性を調整して、16進数ではなくrgbaを使用して色を宣言することでアルファチャネルを含めます。

-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x),  -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x),  -1px 0 2px rgba(28, 14, 3, x);   
box-shadow: 4px 0 2px  rgba(28, 14, 3, x),  -4px 0 2px rgba(28, 14, 3, x);

動作するはずです。xを必要なアルファ透明度（不透明度）に置き換えます。たとえば、50％の透明度の場合は.5です。

于 2012-07-30T16:27:24.090 に答える