css做盒子的曲边阴影和翘边阴影

发表于 | 分类于 |

盒子的曲边阴影，翘边阴影的区别是：曲边阴影看起来盒子下边像是有个曲边。而翘边阴影是往两边翘。两者的本质就是累加，就是看着像是一个盒子的阴影，其实是多个盒子累加起来的阴影，只是其他的看不见，只有shadow。

这个是好久以前跟着慕课网的老师学的，正好现在整理下。下图是直接的感受，要仔细看才能看到不一样的地方，演示地址
曲边翘边
上面一个大图，下边是有阴影的，而且阴影并不是整个的一样，而是两边阴影稍微少点，约往里阴影越明显，到底是咋做的呢，一张图就可以解决。

曲边阴影

曲边
这里就是刚才说的盒子加盒子，外面的大盒子我们看得到，而里面的小矩形，就是隐藏的盒子，大盒子有大盒子的阴影，小盒子有小盒子的阴影，这样一叠加，是不是就是中间阴影更大了呢。

dom结构

1
2
3
<div class="wrap effect">
    <h1>Shadow Effect</h1>
</div>

css编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.effect{
    position: relative;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

.effect:after,.effect:before{
    content: "";
    position: absolute;
    top:50%;
    bottom: 0px;
    left:20px;
    right:20px;
    background-color: red;
    border-radius: 100px/10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: -1;
}

上面还用到了box-shadow的inset,还有after和before，以及要浏览器的各个内核。

翘边阴影

原理解析图如下，原理跟上面几乎一样，也是盒子加盒子，唯一不同的是，这次两个盒子不一样，朝向不同的方向，为不同的边加了阴影。

翘边
翘边
dom结构

1
2
3
4
5
<ul class="box">
    <li><img src="images/photo1.jpg" alt="" /></li>
    <li><img src="images/photo2.jpg" alt="" /></li>
    <li><img src="images/photo3.jpg" alt="" /></li>
</ul>

css编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.box li:before{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    left:21px;
    background: transparent;
    z-index: -2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform:skew(-12deg) rotate(-6deg);
    -webkit-transform:skew(-12deg) rotate(-6deg);
    -moz-transform:skew(-12deg) rotate(-6deg);
    -os-transform:skew(-12deg) rotate(-6deg);
    -o-transform:skew(-12deg) rotate(-6deg);
}

.box li:after{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    right:21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform:skew(12deg) rotate(6deg);
    -webkit-transform:skew(12deg) rotate(6deg);
    -moz-transform:skew(12deg) rotate(6deg);
    -os-transform:skew(12deg) rotate(6deg);
    -o-transform:skew(12deg) rotate(6deg);
}

这里还用到了css3的变形，transform时元素拉伸并且旋转。由于旋转和拉伸，那个隐形的菱形有一边比较靠近边缘，给他加上阴影，阴影范围比较大时，就会有一部分溢出来了，也就是这里的阴影比较明显，2边4个脚都这样，也就形成了翘起来的边啦。