1.單側(cè)投影
重點：box-shadow的第四個長度參數(shù)，擴(kuò)張半徑。
單側(cè)投影：
box-shadow: 0 5px 4px -4px black;//將擴(kuò)張半徑，設(shè)為高斯模糊的負(fù)值
Paste_Image.png
鄰邊投影：
box-shadow:3px 3px 6px -3px black;//將將擴(kuò)張半徑，設(shè)為高斯模糊的負(fù)值的一半；將位移值設(shè)為高斯模糊的一半。
Paste_Image.png
雙側(cè)投影：
box-shadow:5px 0px 5px -5px black, -5px 0px 5px -5px black;
//將單側(cè)投影技巧應(yīng)用兩次。
Paste_Image.png
2.不規(guī)則投影
問題：單用box-shadow不能對不規(guī)則的形狀，例如：透明、折角效果、對話氣泡等。
解決方案：應(yīng)用濾鏡效果規(guī)范
幾個濾鏡串起來
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() 每個像素的色相以指定的度數(shù)進(jìn)行偏移
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亮度信息，并從下層吸取色相飽和度。所以把下層設(shè)置成我們想要的色相飽和度，再混合可以保證圖片亮度。
方案：第一種，把圖片放在一個容器中，容器背景設(shè)成我們要的色調(diào)；第二種：不要圖片元素，用<div>元素，第一層背景為圖片，第二次背景為主色調(diào)。
<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.毛玻璃效果
解決方案：應(yīng)用偽元素，將其置于元素下層，偏移量設(shè)置為0，進(jìn)行blur()模糊處理。
注意：模糊效果的邊緣會逐漸減弱，因此，要讓偽元素相對宿主元素的尺寸再向外擴(kuò)張至少-20px，保險起見，取-30px。對于超出尺寸部分，對main元素設(shè)置，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; //消除擴(kuò)張影響
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; //擴(kuò)大邊界
z-index:-1;
-webkit-filter:blur(20px);
filter:blur(20px); //模糊處理
}
blockquote {font-style:italic }
blockquote cite {font-style:normal;}
Paste_Image.png
本文整理自《CSS揭秘》，推薦閱讀
