0

次のCSSテクニックを使用して、div要素の周りにボックスシャドウをデザインしています...

-webkit-box-shadow:0 0 10px #303030;
-moz-box-shadow:0 0 10px #303030;
box-shadow:0 0 10px #303030;

しかし、CSSにdivの上部でシャドウ効果を停止するように指示する方法はありますか? div要素の左、右、下に効果を持たせたいだけです。

アドバイスをありがとう

4

3 に答える 3

3

デモ

div{
    height: 300px;
    width: 300px;
    -webkit-box-shadow:0 5px 10px #303030;
    -moz-box-shadow:0 5px 10px #303030;
    box-shadow:0 5px 10px #303030;
}
于 2013-04-24T13:42:58.853 に答える
1

仕様によると、2 番目の値は垂直インセットです。「ドロップ シャドウ」効果を持たせるには、その値を更新するだけです。

ボックスの影: 0 10px 10px #303030;

また、box-shadow で実現できるその他のクールな効果については、この記事を確認してください。

于 2013-04-24T14:05:25.537 に答える
1

下の影を長くせずに上の影を完全に取り除くには、私の解決策は、白い背景を持つ div 内に別の要素を含め、それを絶対に配置して上の影を隠すことです。

<div>
    <span></span>    
</div>


div {
    margin-top:20px;
    height:300px;
    width:300px;
    -webkit-box-shadow:0 0 10px #303030;
    position:relative;
}
span {
    display:block;
    position:absolute;
    top:-10px;
    height:10px;
    width:100%;
    background:#fff;
}

http://jsfiddle.net/QE8Bh/1/

于 2013-04-24T13:48:02.297 に答える