1.单侧投影
重点：box-shadow的第四个长度参数，扩张半径。
单侧投影：
box-shadow: 0 5px 4px -4px black;//将扩张半径，设为高斯模糊的负值
Paste_Image.png
邻边投影：
box-shadow:3px 3px 6px -3px black;//将将扩张半径，设为高斯模糊的负值的一半；将位移值设为高斯模糊的一半。
Paste_Image.png
双侧投影：
box-shadow:5px 0px 5px -5px black, -5px 0px 5px -5px black;
//将单侧投影技巧应用两次。
Paste_Image.png
2.不规则投影
问题：单用box-shadow不能对不规则的形状，例如：透明、折角效果、对话气泡等。
解决方案：应用滤镜效果规范
几个滤镜串起来
filter: blur() grayscale() drop-shadow();
将
box-shadow: 2px 2px 10px rgba(0,0,0,.5);
改成
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
Paste_Image.png
重点代码:
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
-webkit-filter:drop-shadow(.1em .1em .1emrgba(0,0,0,.5));
filter:drop-shadow(.1em .1em .1emrgba(0,0,0,.5));
<div class="speech">Speech bubble</div>
<div class="dotted">Dotted border</div>
<div class="cutout">Cutout corners</div>
div {
position:relative;
display:inline-flex;
flex-direction:column;
justify-content:center;
vertical-align:bottom;
box-sizing:border-box;
width:5.9em;
height:5.2em;
margin:.6em;
background:#fb3;
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
-webkit-filter:drop-shadow(.1em .1em .1emrgba(0,0,0,.5));
filter:drop-shadow(.1em .1em .1emrgba(0,0,0,.5));
font:200%/1.6Baskerville, Palatino, serif;
text-align:center;
}
.speech {
border-radius:.3em;
}
.speech::before {
content:'';
position:absolute;
top:1em;
right:-.7em;
width:0;
height:0;
border:1em solidtransparent;
border-left-color:#fb3;
border-right-width:0;
}
.dotted {
background:transparent;
border:.3em dotted#fb3;
}
.cutout {
border:.5em solid#58a;
border-image:1url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%23fb3">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background-clip:padding-box;
}
3.染色效果
基于滤镜的方案
sepia() 降低饱和度的橙黄色效果
saturate() 提高每个像素的饱和度
hue-rotate() 每个像素的色相以指定的度数进行偏移
img {
max-width:640px;
transition:1s filter,1s -webkit-filter;
filter:sepia()saturate(4) hue-rotate(295deg);
}
img:hover,
img:focus {
filter:none;
}
Paste_Image.png
基于混合模式的方案
混合模式：luminosity,保留上层元素的HSL亮度信息，并从下层吸取色相饱和度。所以把下层设置成我们想要的色相饱和度，再混合可以保证图片亮度。
方案：第一种，把图片放在一个容器中，容器背景设成我们要的色调；第二种：不要图片元素，用<div>元素，第一层背景为图片，第二次背景为主色调。
<img>方法
<a href="#">
</a>
a{
display:inline-block;
background:hsl(335, 100%, 50%);
}
a img {
mix-blend-mode:luminosity;
max-width:640px;
}
Paste_Image.png
4.毛玻璃效果
解决方案：应用伪元素，将其置于元素下层，偏移量设置为0，进行blur()模糊处理。
注意：模糊效果的边缘会逐渐减弱，因此，要让伪元素相对宿主元素的尺寸再向外扩张至少-20px，保险起见，取-30px。对于超出尺寸部分，对main元素设置，overflow:hidden，来解决。
<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 {
min-height:100vh;
box-sizing:border-box;
margin:0;
padding-top:calc(50vh - 6em);
font:150%/1.6 Baskerville,
Palatino, serif;
}
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;
-webkit-filter:blur(20px);
filter:blur(20px); //模糊处理
}
blockquote {font-style:italic }
blockquote cite {font-style:normal;}
Paste_Image.png
本文整理自《CSS揭秘》，推荐阅读
网友评论