html - CSSを使用してインセットダークドロップシャドウ効果を作成する

Question

次の画像のようなCSSのはめ込みドロップシャドウ効果のような効果を取得しようとしています。

_{（出典：gyazo.com）}

CSSでその効果を得る方法を知っている人はいますか？

Answer 1

ここで重要なのは、複数のボックスシャドウ、左上から挿入されたより大きな暗いシャドウ、およびその下の非常に微妙なシャドウで、背景よりもわずかに明るいです。

ボックスシャドウの形式が「xオフセット、yオフセット、ぼかし、色」であることに注意してください。

ぼかしの量と複数の影の使い方を学び、いくつかの本当に素晴らしい効果を作ることができます。

スタイルの例（＃222の背景に表示するため）：

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

Answer 2

答えはすでにあなたに与えられているので（box-shadow: inset ..）、それがどのように機能するかを簡単に示します。

http://jsfiddle.net/L6nJj/

重要な部分はbox-shadow: inset 2px 2px 3px 0 redです。

利用可能なオプションの説明については、https ：//developer.mozilla.org/en/css/box-shadow#Valuesをご覧ください。

のブラウザサポートを必ず考慮してくださいbox-shadow。これは、古いバージョンのIEでは機能しませんが、それ以外の場合は「どこでも」機能します：http: //caniuse.com/css-boxshadow

Answer 3

CSS3box-shadowプロパティ、特に挿入ボックスの影を見てください。この記事の例Lは、探している効果を提供するはずです。