知识储备
1.box-shadow 向框添加一个或多个阴影
2.filter:drop-shadow() SVG滤镜
和box-shadow效果类似，但是没有模糊半径和inset选项
测试
单边阴影
用box-shadow来产生单边阴影
html
<div class="unilateral-shadow"></div>
css
.unilateral-shadow{
width: 100px;
height: 80px;
margin: 0 auto;
background: orangered;
box-shadow: 0 5px 4px -4px black;
}
思考
首先我们要了解到有 阴影距离(第四个参数)可以是负的
于是有 模糊距离+阴影距离=0 四侧的阴影都被隐藏了
最后我们将阴影向下移动5px ，使下部的阴影显示出来
相邻两边阴影
效果：
相邻两边阴影
html
<div class="two-adjacent-sides-shadow"></div>
css
.two-adjacent-sides-shadow{
width: 100px;
height: 80px;
margin: 10px auto;
background: orangered;
box-shadow: 3px 3px 6px -3px black;
}
思考
公式： 模糊距离+阴影距离+移动距离 = 结果
左侧阴影：6px+(-3px)-3px = 0
右侧阴影：6px+(-3px)+3px = 6px
上下也类似
其他：对立两侧阴影
效果：
对立两侧阴影
特殊的阴影
效果：
1
2
3
第一个例子展示一下代码
html
<div class="speech-bubble">Speech Bubble</div>
css
.speech-bubble{
width: 100px;
height: 100px;
margin: 10px auto;
background: sandybrown;
position: relative;
border-radius: 5px;
text-align: center;
padding: 25px 0;
box-sizing: border-box;
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));
/* 不合适的box-shadow */
/*box-shadow: 3px 3px 6px -3px black;*/
}
.speech-bubble::before{
content: '';
width: 20px;
height: 20px;
position: absolute;
right: -10px;
top: 20px;
transform: rotate(45deg);
background: inherit;
}
思考
这里应用了filter:drop-shadow()属性
缺点：当背景为透明时，如果字体设置了阴影，他会为阴影设置阴影，也就是阴影的阴影
这里绿色的是文字阴影，灰色是滤镜阴影
当我们不想要文字阴影时，用text-shadow是取消不了的。所以只有取消滤镜。真尴尬
让我们来看看box-shadow的效果，平衡一下
小箭头没阴影
总结：我们在设计一些小细节的可以用到阴影。这样的设计还是十分好看的
