前言
还原设计稿,尊重UI设计师的劳动成果。先来看看:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2Lc1TPn1keFRlT4FEVPpHOsJGcohVYsR2MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zM3QDM1IDM5AzNwkDM4EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
开始
今天要研究的就是红框中的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哈哈~
嘘寒问暖 不如打笔巨款~