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哈哈~

噓寒問暖 不如打筆巨款~