css - グラデーション付きのドロップ シャドウ CSS

Question

HTML と CSS を使用するプロジェクトに取り組んでおり、このサイトで使用されているようなものを複製したいと考えています。

http://slb.com/hse/hse_policy.aspx

上部のコンテナー div を囲むドロップ シャドウと、さらに重要なことに、下部に向かってフェードアウトするように、どのようにシャドウにグラデーションを付けるのですか? 実際のドロップ シャドウを取得する方法を知っています。

乾杯

Answer 1

明らかに、彼らはその目的のために背景画像 ( http://slb.com/images/gradient_1120.jpg ) を使用しています。ただし、本体の前にいくつかの要素 (疑似要素である可能性があります) を追加して、背景としてグラデーションを与えることもできます。

#bg-element-left {
    /* background-gradient from top right to bottom left */
}

#main content {
    /* styled as you wish */
}

#bg-element-right {
    /* background-gradient from top left to bottom right */
}

Answer 2

純粋な CSS でそれを行う方法はありません。あなたがリンクしたサイトは、これを行うために大きな画像を使用しています: http://slb.com/images/gradient_1120.jpg - 同じ効果を得るには、同様のことを行う必要があります。