Chapter 4
1. 單側投影
為元素設置投影可以使用 box-shadow 屬性，指定三個長度值（X軸偏移量、Y軸偏移、模糊半徑）與一個顏色值
要想只在底部設置投影，需要用到第四個參數：投影的擴張半徑，如果該值為負，就代表縮小投影尺寸
box-shadow: 0 2px 4px black; //即使設置X軸偏移量為0，兩側還會有輕微的投影 css的動畫效果實現方法，
box-shadow: 0 5px 5px -5px black，0 -5px 5px -5px blue; //通過逗號分隔，單獨設置各邊投影 
此外，還可以通過 filter：drop-shadow（）；為不規則圖形添加投影
2. 染色效果
鼠標聚焦到圖像上可以是圖片顏色更改或者復原，是現在網頁很常見的一種操作，看起來也很炫
css特效代碼大全，可以把多個濾鏡組合起來實現
<img src="342.png"> ------------------------------ img {width: 400px;height: 300px;transition: 0.5s filter; //過渡動畫效果filter: sepia(1); //降低色相值：saturate, //提升像素飽和度：hue-rotate } img:hover, img:focus{filter:none; }
? ? ?
3. 毛玻璃效果
這種效果現在在手機系統下拉菜單經常看到，或者 iPhone 的 siri 界面，都是毛玻璃效果
通常可以通過調整div背景透明度做效果，但這樣并不是毛玻璃效果，真正的毛玻璃效果需要用偽元素來實現，在要加背景的元素底部放一個偽元素，然后對這個偽元素進行模糊處理即可
<body>
<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>
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; //放到main的下層filter: blur(20px);
} CSS世界讀后感、
?
