CSS 单边阴影

最新推荐文章于 2023-04-09 16:26:54 发布

wangzi1993

最新推荐文章于 2023-04-09 16:26:54 发布

阅读量383

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/wangzi1993/article/details/108779627

版权

本文探讨了如何通过CSS来巧妙地实现单边阴影效果，特别是在box-shadow无法满足需求时。作者提供了一种方法，即在目标元素上方添加一个固定高度的div，利用线性渐变背景模拟顶部阴影。这种方法能够确保其他边不受影响，且易于调整细节，适用于需要大尺寸单边阴影的情况。

摘要由CSDN通过智能技术生成

使用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>

在这里插入图片描述

效果还可以，其他边没有受到影响。

那么再稍微调整亿点细节…

在这里插入图片描述

wangzi1993

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 单边阴影

使用box-shadow很难实现单边阴影，特别是当单边阴影尺寸较大时，其他边或多或少会收到影响，效果如下既然box-shadow无法实现，那就换个思路；如我想在div的上面加阴影，那就在div上面加个定高的div，设置黑色到透明的渐变。具体代码如下# css.shadow-top { position: absolute; top: -24px; height: 24px; width: 100%; background: linear-gradient(to
复制链接

扫一扫