divの3辺のCSSボックスシャドウ？

Question

divの3辺にボックスシャドーを付けたい（上辺を除く）。どうすればいい？

Answer 1

あなたのためにJS Fiddleがあります。これは1つのdivだけを使用して動作します。

#shadowBox { 
    background-color: #ddd; 
    margin: 0px auto; 
    padding: 10px; 
    width: 220px; 
    box-shadow: 0px 8px 10px gray, 
     -10px 8px 15px gray, 10px 8px 15px gray; 
} 

シャドーを左下と右下に設定しました。柔らかい影ではややこしいですが、それは実行可能です。ミドルシャドウのぼかし半径を小さくするにはちょっとした推測が必要です。そのため、サイドシャドウと重なってもシームレスで、あまりにも暗く見えません。

Answer 2

は、ここでは、固体の背景色を持っている場合は、あなたがbackground-colorとz-indexの組み合わせを使用することによって、これを達成することができます@Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15); 

Answer 3

によって提案された負のY値の一例です。そのトリックは、要素をbox-shadowとそれ以前の兄弟の位置付けを与え、次に前の兄弟に背景色を与え、を高く設定して、要素の上にbox-shadowで積み重ねられます。

あなたがここにデモを見ることができます：http://codepen.io/thdoan/pen/vNvpKv

で動作するように即時前の兄弟がありません場合、あなたはまた、:beforeや:afterとして擬似要素を使用することができます：http://codepen.io/thdoan/pen/ojJEMj

Answer 4

あなたが探している場合Googleの材料設計の影のようなもののために：

.shadow1 { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.shadow2 { 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 
.shadow3 { 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
} 
.shadow4 { 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
} 
.shadow5 { 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
} 

出典：https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

Answer 5

ハードコーナーの半透明シャドー（すなわち、私はこれを使用しました：

.shadow-no-top { 
    position: relative; 
    box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2); 
} 
.shadow-no-top:before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: -5px; 
    right: -5px; 
    bottom: -5px; 
    background-color: rgba(0,0,0,.2); 
} 

これは、左右の部分に影を使用し、：after擬似コンテンツを下の影として追加します。これにより、影をより暗くしたり、欠けたりするオーバーラップを避けることができます。

ただし、これは要素の背景が実線であることを必要とします。