单侧投影
顾名思义,只需要一侧有投影,使用box-shadow的第四个长度参数——扩张半径
box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.5);
原理是这个值会根据指定的值去扩大或者缩小投影的尺寸,如果给一个负的扩张半径,它的值正好等于模糊半径,那么投影的尺寸就好和它所属的元素的尺寸完全一致,这个时候给投影一个y轴偏移量,就能在元素底部看见投影,而另外三侧是没有的
双侧投影
投影设置在元素的两条对边上
扩张半径在四个方向上的作用是均等的,所以唯一的办法是用两块投影来达到目的,也就是把单侧投影技巧运用两次
box-shadow: 5px 0px 5px -5px black,
-5px 0px 5px -5px black;
不规则投影
给矩形之类的不规则形状,例如对话气泡用伪元素生成的小尾巴,等添加投影
使用filter
属性的drop-shadow()
滤镜,这个滤镜接受的参数基本与box-shadow
属性是一样的,但不包括扩张半径,inset关键字,和逗号分割的多层投影语法
例:
.box {
width: 200px;
height: 200px;
background-color: #bfa;
filter: drop-shadow(2px 2px 5px #000);
position: relative;
}
.box::after{
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
border-top: 30px solid skyblue;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
}
在元素形状不规则的时候使用filter
属性的drop-shadow()
滤镜就能很方便的得到不规则投影
染色效果
为图片增加染色效果,比如把灰色图片变成彩色,或是反过来。可以在图片上层覆盖一层半透明的元素,这是一种办法,但这并不是真正的染色,还可以使用canvas用脚本进行染色,但这样非常麻烦,推荐使用以下两种方式
基于滤镜的方案
使用filter: sepia()
,它会给图片增加一种降饱和度的黄橙色染色效果
使用filter: saturate()
,它可以提升饱和度
使用filter: hue-rotate()
,可以把每个像素的色相以指定度数进行偏移
三者也可以结合使用
filter: sepia(1) saturate(4) hue-rotate(195deg)
毛玻璃效果
不能直接对元素本身进行模糊处理,否则元素内容也会变得模糊,所以就先给该元素添加一个伪元素,然后将其定位在元素的下层,它的背景将无缝匹配到<body>
元素的背景。
body,.box::before {
background: url("/3.jpg") 0 / cover fixed;
}
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 200px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
未完待续.........