投影

单侧投影

box-shadow:0px 10px 10px -5px black;

邻边投影

box-shadow:10px 10px 10px 2px black;

双侧投影

box-shadow:10px 0px 10px -10px black,          -10px 0px 10px -10px black;

*:

box-shadow: h-shadow v-shadow blur/*模糊距离*/ spread/*阴影尺寸*/ color inset;

不规则投影

filter:drop-shadow() grayscale blur();

*：drop-shadow() 滤镜可接受的参数基本上跟 box-shadow 属性是一样的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投影语法

毛玻璃效果

body,main::before{    background: url(./1.jpg) 0 / cover fixed;}main{    background: hsla(0, 0%, 100%, .3);    width: 200px;    height:    200px;    margin: 0 auto;    position: relative;    overflow: hidden;}main::before{    content: '';    position: absolute;    top:0;right: 0;bottom: 0;left: 0;    z-index: -1;    filter: blur(20px);    margin: -30px;}

折角效果

......