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

前言

还原设计稿，尊重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-box;
	border-radius:6rpx;
	box-shadow:0rpx 0rpx 10rpx rgba(4,0,0,.2);
	background:#fff;
}
.stack {
	position:relative;
	margin:0 auto;
	border-radius:0 0 6rpx 6rpx;
	box-shadow:0rpx 0rpx 10rpx 0rpx rgba(4,0,0,.2);
	background:#fff;
}
.stack1 {
	/* 设置第二层的z-index:1;让它的box-shadow的阴影可以覆盖在.stack2上 */
    z-index:1;
	width:696rpx;
	height:8rpx;
}
.stack2 {
	width:678rpx;
	height:10rpx;
}

来看一下效果：

如果我们不设置position和z-index会怎样呢？

为了看清楚不同，我们再看一组对比图

 可以看出.stack2扩展的阴影在.stack1上，导致.stack1和.stack2都未达到相应的效果（.rec-wrapper的扩展阴影要覆盖在.stack1上，。stack1的扩展阴影要覆盖在.stack2上）。

 

扩展

box-shadow: 水平方向上的位置 垂直方向上的位置  阴影的模糊距离  阴影的大小  阴影的颜色；

四边分开:  box-shadow: 上，左，右，下；

更多参考：

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
• http://www.w3school.com.cn/cssref/pr_box-shadow.asp
• http://www.runoob.com/cssref/css3-pr-box-shadow.html

总结

遇到问题，解决问题。解决同一问题的方式方法多种多样，我们需要的是找到更优的编码实现。要考虑代码的可维护和可扩展性，编码一时爽，重构火葬场~关爱程序员，从我做起。哈哈哈O(∩_∩)O哈哈~

嘘寒问暖 不如打笔巨款~