側面のみのボックスシャドウ

Question

側面にのみボックスシャドウを表示する必要があります。それはdivの一番下にある影ではありません。私が試したのstackoverflow上の他の記事を読む

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 

：

box-shadow: 5px 0px 0px rgba(0, 0, 0, 0.3); 

をしかし、動作しない側と下部に影を与える私のboxshadow CSSは次のようになります。どのように達成するための任意のヘルプは、効果が非常に高く評価されるだろう。ありがとうございました！

Answer 1

擬似要素を使用して、上/下の影を覆うことができます。

div { 
 
    background: white; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 
div:before, div:after { 
 
    position: absolute; 
 
    left: 0; right: 0; 
 
    content: ''; 
 
    background: white; 
 
} 
 
div:before { 
 
    height: 2px; /* 3px - 1px */ 
 
    top: 0; 
 
    transform: translateY(-100%); 
 
} 
 
div:after { 
 
    bottom: 0; 
 
    transform: translateY(100%); 
 
    height: 4px; /* 3px + 1px */ 
 
}

<div></div>

Answer 2

複数のボックスの影、右用左用とその他にspread-radius引数に負の値を使用してください。これは、スプレッド半径値の絶対値がblur-radius以上の場合に有効です。

div { 
 
    margin: 30px; 
 
    height: 100px; 
 
    width: 75px; 
 
    box-shadow: -5px 0 3px -4px black, 5px 0 3px -4px black; 
 
}

<div></div>