《CSS揭秘》笔记

这本书的内容不是很多，总共有八张的内容

视觉效果

1. 单侧投影实现

解决的方法是，在box-shadow 上还有一个扩展半径，这个参数会根据你指定的值去扩大或缩小投影的尺寸。举例来说，一个-5px 的扩张半径就会把投影的宽度和高度都减少10px (即每边各5px)

不需要显示那边，就把响应的扩展半径设置为响应的负值即可

div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: skyblue;
    box-shadow: 0 6px 4px -4px black;
    text-align: center;
}

2. 相邻投影实现 我们不应该把投影藏进一侧，扩张半径不应该设为模糊半径的相反值，而应该是这个相反值的一半。

div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: skyblue;
    box-shadow: 3px 3px 6px -3px black;
    text-align: center;
}

双侧投影实现效果图：

3. 双侧投影实现

双侧投影的实现，唯一的方法就是利用两块投影来达到目地，然后基本上就是把""单侧阴影"中的技巧运用两次。

div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: skyblue;
    box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
    text-align: center;
}

4. 不规则投影 当我们想给一个矩形或者是border-radius 生成的形状，加投影时，box-shadow 的表现都堪称完美，但是一些元素添加了伪元素和半透明的装饰之后，它就有些力不从心啦

主要的解决方案就是利用filter滤镜的属性进行设置

div {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: skyblue;
    text-align: center;
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .5));
}

最终的实现效果：