CSS: box-shadow+z-index实现层叠式阴影

最新推荐文章于 2024-07-26 08:45:03 发布

置顶

車句

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量4.4k

点赞数

分类专栏：页面样式文章标签： box-shadow 阴影层叠 CSS box-shadow 设置阴影

本文链接：https://blog.csdn.net/weixin_39015132/article/details/82490991

版权

前言

还原设计稿，尊重UI设计师的劳动成果。先来看看：

设计稿

开始

今天要研究的就是红框中的3个层叠的阴影。动手编码之前，我们先来分析一下实现的思路。

设计师设计的时候应该是对最大的一个进行了缩放，生成两个小一些的放在下边，实现层叠的效果。开发时也可以根据这个思路去实现。
这边他明确给出了相差的宽度，我就把下面两个单独出来，设计圆角时，只设计左下和右下的。

实践

wxml:

/* 最大的内容区域 */
<view class="rec-wrapper"></view>
/* 第一个层叠 */
<view class="stack stack1"></view>
/* 第二个层叠 */
<view class="stack stack2"></view>

wxss:

.rec-wrapper {
	/* 设置第一层的z-index:2;让它的box-shadow的阴影可以覆盖在.stack1上 */
    z-index:2;
	position:relative;
	width:710rpx;
	height:490rpx;
	margin:0 auto;
	box-sizing:border-box;
	padding:53rpx 96rpx  0 96rpx;
	box-sizing:border-bo