要素の片側だけにボックスシャドウブラーを追加する

Question

ボックスシャドウを使用してdivの片側だけにぼかしを追加することはできますか？

私が達成しようとしているのは、ではなく、の幅の影です。divの片側だけにぼかしがあります。私の例では、私は底にそれを適用しようとするが、側面は本当に重要ではありません。

私はこの方法を使用してbox-shadow: 0px 5px 5px -5px #000000;を使用してみましたが、影がdivの下部にある全長をカバーしていません。

#bg { 
 
    text-align: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 50px; 
 
    background: #eeeeee; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 100%; 
 
    box-shadow: 0px 5px 5px -5px #000000; 
 
    background: yellow; 
 
} 
 

<div id="bg"> 
 
    <div id="box"></div> 
 
</div>

のみHTMLとCSSのソリューション下さい。

Answer 1

あなたは要素の後に使用し、それを少し伸ばすことができます：

#bg { 
 
    text-align: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 50px; 
 
    background: #eeeeee; 
 
} 
 

 
#box:after { 
 
    content:''; 
 
    display:block; 
 
    position:absolute; 
 
    z-index:0; 
 
    top:0; 
 
    left:-4px; 
 
    right:-4px; 
 
    bottom:0; 
 
    box-shadow: 0px 5px 5px -5px #000000; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 100%; 
 
    position:relative; 
 
    background: yellow; 
 
}

<div id="bg"> 
 
    <div id="box"></div> 
 
</div>

Answer 2

#bg { 
 
    text-align: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 50px; 
 
    background: #eeeeee; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-bottom: 2px solid #ccc; 
 
    background: yellow; 
 
} 
 

<div id="bg"> 
 
    <div id="box"></div> 
 
</div>

Answer 3

下にこれを試してくださいあなたはまた、正確に行うために利用可能な方法は何も容易にありませんかbox-shadow作品

Answer 4

理解するためにhttps://developer.mozilla.org/en/docs/Web/CSS/box-shadowを読むことができるbox-shadow

.your_class { 
    box-shadow: 0 8px 6px -6px black; 
} 

を配置あなたが探しているもの、少なくとも単一のものを使用していないものbox-shadow。覚えておいてください。CSS box-shadowプロパティはコンマで区切られた複数のエントリーを受け入れますので、使用することをお勧めします。下の例では、私は単にbox-shadow値の2つのコピーを使用しています.1つは、最初に水平方向に左に向かって2.5px、もう一方を正方向にプラスの2.5pxでオフセットしました。さらに、色に不透明度を追加しました（重なり合った影のダークニング効果を緩和するため）。

#bg { 
 
    text-align: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 50px; 
 
    background: #EEE; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 100%; 
 
    box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50), 
 
       2.5px 5px 5px -3px rgba(0, 0, 0, 0.5); 
 
    background-color: Yellow; 
 
}

<div id="bg"> 
 
    <div id="box"></div> 
 
</div>

Answer 5

この

#bg { 
    text-align: center; 
    width: 200px; 
    height: 200px; 
    padding: 50px; 
    background: #eeeeee; 
} 

#box:after { 
    content:''; 
    display:block; 
    position:absolute; 
    z-index:0; 
    bottom:0px; 
background-image: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0, #9C9C9C), 
    color-stop(0.22, #EEEEEE) 
); 
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%); 
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%); 
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%); 
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%); 
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%); 
height:10px; 
width:100%; 

} 

#box { 
    width: 100%; 
    height: 100%; 
    position:relative; 
    background: yellow; 
} 

をお試しください

https://jsfiddle.net/Lfa4z5b4/