如何將框陰影添加到其高度的一半

Question

我正在嘗試向陰影添加陰影。陰影應該在頂部和頂部的一半（向左右兩側），有人請幫助我。

.test { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 10px; 
 
    border: solid 1px red; 
 
    position: relative; 
 
    background-color: white; 
 
}

Answer 1

可以增加抵減箱陰影的大小，並繪製它們的2。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

/*偏移-X | offset-y |模糊半徑|傳播半徑|顏色*/

<spread-radius>

這是一個第四值。正值會導致陰影擴大並變大，負值會導致陰影縮小。如果未指定，則它將爲0（陰影將與元素的大小相同）。

#test { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 10px; 
 
    border: solid 1px red; 
 
    position: relative; 
 
    background-color: white; 
 
    box-shadow: -50px -50px 5px -50px, 50px -50px 5px -50px 
 
}

<div id="test"></div>

Answer 2

這可能是一個簡單的方法來做到這一點，相當多的可能性。

.parent{ 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 10px; 
 
    position: relative; 
 
} 
 

 
.test { 
 
    z-index: 2; 
 
    width: 100%; 
 
    position: relative; 
 
    height: 100%; 
 
    border: solid 1px red; 
 
    background-color: white; 
 
} 
 

 
.halfshadow{ 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    height: 50%; 
 
    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5); 
 
}

<div class="parent"> 
 
    <div class="test"></div> 
 
    <div class="halfshadow"></div> 
 
</div>