0

divの高さが10pxの場合、影は問題ありません。

http://jsfiddle.net/m3KYB/6/

ただし、高さを1pxまたは0に変更すると、シャドウのぼかしが不十分になり、色が均一になり、（FirefoxとChromeの両方で）明るくなります。

と一緒に10pxの高さを使用してハッキングするmargin-top: -10pxことができますが、「偽の」10pxボックスの左側と右側の周りに「余分な影」がある場合があります...そしてそれなしでそれを行うためのより標準的な方法は何ですかハックを使用していますか？

4

1 に答える 1

1

私はあなたのコーディングサンプルを少しいじりました。クロムでは、 から降りるたびに影が奇妙に明るくなりますheight:5px;。FFでも同じ。私はいくつかのスクリーン グラブを行い、Photoshop で影の div の下部に最も近い色を見ました。結果は次のとおりです。

height:5px; - #b5b5b5  
height:4px; - #c0c0c0  
height:3px; - #cccccc  
height:2px; - #d8d8d8  
height:1px; - #e3e3e3  
height:0px; - #eeeeee

最初の色 @ 5px は CSS の色よりもかなり明るいため、効果は 5px より前に開始する必要があります。最も簡単な効果は、下げるピクセルごとに色を 10% 暗くすることです。これは視覚的にこれを修正する必要があります。

何が起こっていると思いますか？5px 未満の div を作成すると、ブラウザーが影のグラデーションの #888 部分を開始するポイントが小さすぎて、正確に表示できません。おそらく、5 ピクセルの高さの div の中央 (ビューポートの後ろ) で影が始まり、合計 7 ～ 8 ピクセルでは、#888 のような暗い灰色から降りるのに十分なスペースがありません。あなたはバンディングの大きな時間を目にするでしょう。そのため、ブラウザは色をある程度ミュートすることで、その潜在的な落とし穴を無効にしています。

奇妙ですが、FF と Chrome の両方で発生しているので、シャドウがどのように劣化するかについての W3C 仕様の一部に賭けます。これが正しい答えかどうかはわかりませんが、私が思いつく最善の答えです。これは、OSX 10.6.4 の FF 3.6.12 および Chrome 7.0.517.44 にありました。

于 2010-11-12T16:13:06.617 に答える