如何将框阴影添加到其高度的一半

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>