使用box-shadow
很难实现单边阴影,特别是当单边阴影尺寸较大时,其他边或多或少会受到影响,效果如下
既然box-shadow
无法实现,那就换个思路;如我想在div的上面加阴影,那就在div上面加个定高的div,设置黑色到透明的渐变。具体代码如下
# css
.shadow-top {
position: absolute;
top: -24px;
height: 24px;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0, .24),rgba(0,0,0,0) 100%);
}
# html
<div style="position: relative">
<div class="shadow-top"></div>
5
</div>
效果还可以,其他边没有受到影响。
那么再稍微调整亿点细节…