小程序顶部导航box-shadow实现

image.png

使用伪类

最外层的box 使用设class = container：
css：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  position: relative;
} 
.container::after{
  content: '';
  box-shadow:0 2rpx 25rpx 10rpx rgb(236, 236, 236);
  position: absolute;
  width: 100%;
}

box-shadow用法：

box-shadow: h-shadow v-shadow blur spread color inset;


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容