Chapter 4
1. 单侧投影
为元素设置投影可以使用 box-shadow 属性，指定三个长度值（X轴偏移量、Y轴偏移、模糊半径）与一个颜色值
要想只在底部设置投影，需要用到第四个参数：投影的扩张半径，如果该值为负，就代表缩小投影尺寸
box-shadow: 0 2px 4px black; //即使设置X轴偏移量为0，两侧还会有轻微的投影
box-shadow: 0 5px 5px -5px black，
0 -5px 5px -5px blue; //通过逗号分隔，单独设置各边投影
此外，还可以通过 filter：drop-shadow（）；为不规则图形添加投影
2. 染色效果
鼠标聚焦到图像上可以是图片颜色更改或者复原，是现在网页很常见的一种操作，看起来也很炫
可以把多个滤镜组合起来实现
<img src="342.png"> ------------------------------ img { width: 400px; height: 300px; transition: 0.5s filter; //过渡动画效果 filter: sepia(1); //降低色相值 ：saturate, //提升像素饱和度 ：hue-rotate } img:hover, img:focus{ filter:none; }
3. 毛玻璃效果
这种效果现在在手机系统下拉菜单经常看到，或者 iPhone 的 siri 界面，都是毛玻璃效果
通常可以通过调整div背景透明度做效果，但这样并不是毛玻璃效果，真正的毛玻璃效果需要用伪元素来实现，在要加背景的元素底部放一个伪元素，然后对这个伪元素进行模糊处理即可
<body>
<main> <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em> <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer> </blockquote> </main>
<body>
body, main::before {
background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
}
main {
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden; //裁去多余的模糊效果
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}
main::before {
content: ‘‘;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: -30px;
z-index: -1; //放到main的下层
filter: blur(20px);
}
原文：https://www.cnblogs.com/sleeping-dog/p/8723750.html