问题
I use my CSS page below. He applies a box-shadow on the 4 sides.
I want it to be applied only to the right, bottom and left.
How to apply box-shadow only on 3 sides ?
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
box-shadow: 0 0 10px rgba(0,0,0,0.22);
回答1:
You can always do something like:
.shadow-box {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}<div class="shadow-box">Box with shadows</div>回答2:
box-shadow supports only X & Y offset, but you can achieve box-shadow to 3 directions, by providing appropriate value to the offsets.
Tip : In chrome via inspect element you can easily get the exact values and preview that before using it.
Please refer to snippet below.
#boxShadow {
display: block;
margin: auto;
height: 300px;
width: 300px;
background: #cdcdcd;
box-shadow: 0px 5px 8px 0px #3fab83;
}<br><div id="boxShadow">
</div>来源：https://stackoverflow.com/questions/51731699/how-to-apply-box-shadow-only-on-3-sides