CSSでボックスシャドウを作成する最も効果的な方法

Question

cssでボックスシャドウを作成する最も効果的な方法を見つけることに興味があります。しかし、それはつまり、実装の容易さ、柔軟性、およびブラウザー間の互換性です。

Answer 1

タマネギの皮は私の個人的なお気に入りです。

例は、この alistapartの記事にあります。

Answer 2

これは非常に簡単に実現できるようになりました。

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

最初の値は水平オフセットです。 2番目の値は垂直オフセットです。 3番目の値は、ぼかし効果の広がりです。 4番目の値は色です。

さらに、 inset の別の値を追加できます。これにより、ブロック要素の内側に影が表示されます：

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

これは現在非常によくサポートされています： https://caniuse.com/#feat=css- boxshadow

Answer 3

現在最も効果的であると思う方法は次のとおりです：

必要なCSSルール：

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

CSSが適用されるHTMLコード：

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

実装が非常に簡単で、柔軟性があり、FF 3、IE 6＆amp;でも同じように動作することがわかりました。 7。