投影
单侧投影
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);
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;
}
折角效果
......
本文转载于:猿2048[CSS]《CSS揭秘》第四章——视觉效果