2012-02-11 9 views
1

私のボックスの内側と底部にこの影をつけようとしていますが、動作させることはできません。どのようにこれを行うには良い説明をして、私を助けることができる人はいますか?CSSシャドーオポジションの場所

-moz-box-shadow:0 5px 5px rgba(128,128,128,0.1); 
-webkit-box-shadow: 0 5px 5px rgba(128,128,128,0.1); 
box-shadow: 0 5px 5px rgba(128,128,128,0.1); 
+0

John;のコメントを参照)。あなたがボックス内にグラデーションを入れたいのであれば、CSSを使って 'background-image:-moz-linear-gradient(top、#333333、#222222);などのグラデーションを作成することができます。 –

+0

ために。でもありがとう! –

答えて

2

多分それはどうですか?

-moz-box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1); 
-webkit-box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1); 
box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1); 
+0

非常にクールな、私は入れ墨で何か新しいことを学んだ! –

+0

これは正しくありません。 –

+0

影が右側にもあるので正しくないのですか? –

0

これはどうでしょうか?それは、あなたが(複数の正規の箱の影とのインセットをシミュレートする)このような何かを試みることができるけれども...

-webkit-box-shadow: inset -1px 3px 3px rgba(255,255,255,1), 
        inset 1px 3px 3px rgba(255,255,255,1), 
        inset 0px -3px 3px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset -1px 3px 3px rgba(255,255,255,1), 
        inset 1px 3px 3px rgba(255,255,255,1), 
        inset 0px -3px 3px rgba(0,0,0,0.3); 
     box-shadow: inset -1px 3px 3px rgba(255,255,255,1), 
        inset 1px 3px 3px rgba(255,255,255,1), 
        inset 0px -3px 3px rgba(0,0,0,0.3); 

または代替として、左右の手の両側に小さなギャップを残し:

-webkit-box-shadow:  0 1px 3px rgba(255,255,255,0.5), 
         0 2px 3px rgba(255,255,255,0.5), 
         0 3px 0px rgba(0,0,0,0.3); 
    -moz-box-shadow:  0 1px 3px rgba(255,255,255,0.5), 
         0 2px 3px rgba(255,255,255,0.5), 
         0 3px 0px rgba(0,0,0,0.3); 
     box-shadow:  0 1px 3px rgba(255,255,255,0.5), 
         0 2px 3px rgba(255,255,255,0.5), 
         0 3px 0px rgba(0,0,0,0.3); 

残念ながら、これにはキャンセリングシャドウからの白い輝きの警告もあります。