60

ボックスシャドウを使用して内部シャドウを作成しています...

box-shadow: inset 0 0 10px #000000;
-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;

...しかし、内側の影は下からのみ入りたいと思います。私はこれを機能させるためにいくつかの方法を試しましたが、できません...ボックスシャドウでこれを行うにはどうすればよいですか？

4

2 に答える 2

147

広がり距離を定義する4番目の長さには負の値を使用します。これは見過ごされがちですが、すべての主要なブラウザでサポートされています。結果については、このフィドルを参照してください。

div {
  background: red;
  height: 100px;
  width: 200px;
  -moz-box-shadow: inset 0 -10px 10px -10px #000000;
  -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
  box-shadow: inset 0 -10px 10px -10px #000000;
}
<div></div>

于 2012-08-22T22:01:05.190 に答える
20

JSnippetデモ

上のみ：

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

下部のみ：

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

上下のみ：

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

簡単な例

.shadow-top {
    -moz-box-shadow:    inset  0  10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey;
}
.shadow-bottom {
    -moz-box-shadow:    inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0 -10px 10px -10px grey;
}
.shadow-top-bottom {
    -moz-box-shadow:    inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
}

div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }
<div class='shadow-top'></div>
<div class='shadow-bottom'></div>
<div class='shadow-top-bottom'></div>

于 2015-05-25T18:24:20.153 に答える