| 2011.9.30 現時点のブラウザ最新バージョンではベンダープレフィックスは必要ありません。 ただしインターネットエクスプローラーでは、現時点では最新のバージョンでも表示する事は出来ません。 | ||||||||
| ||||||||
| #~の部分は影の色の指定です。 そのあとに4つのpx値を指定してます。 左から3,4はカット可能 | ||||||||
| 左から1番目のpxは水平に影を移動させる値です。 10pxなら右に10px移動します。 -10xpなら左に移動です。 | ||||||||
| ２番目は垂直方向です 10pxだと下に10px移動です。 -10pxだと上に10px移動です。 | ||||||||
| 3番目は影のぼかし距離です。 0pxだとくっきりします。 | ||||||||
| 4番目はぼかしの広がりです。 | ||||||||
| insetをつけた場合は、影は外ではなく中に出来ます。 | ||||||||
| 色指定をrgba(255,255,255,0.4)とすると透明度も指定できます。 この例では255と書いてある部分が、RGBでの色指定となります。 最後の0.4の部分が透明度です。 透明度は0.1〜1の間で指定します。 ちなみに255の部分は％でも指定が出来ます。 rgba(10%,50%,80%,0.5)と言った感じです。 余談ですが透明度指定ではopacityというプロパティーもありますが、opacityの場合は、画像やtextを含むBOXまるまる全て透明になってしまいます。 RGBAの場合は、セレクタごとに指定できますから、文字まで全部透明になっちゃったという事がありません。 | ||||||||
| 実行例 inset（内側に影） | ||||||||
| コード例 | ||||||||
| box-shadow:inset #3F9 0px 0px 10px 3px; | ||||||||
| 通常（insetを記述しない） | ||||||||
| コード例 | ||||||||
| box-shadow:#3F9 0px 0px 10px 3px; | ||||||||
|