最近新項(xiàng)目剛上手物延，自己也比較菜，挺忙仅父。抽空在Dribble上找時鐘練習(xí)CSS的時候叛薯，發(fā)現(xiàn)了一個令我很困擾的事情。
一個這樣的鐘表盤笙纤，可以明顯看到ICON是圖片耗溜，那就先不做，把表盤做做練習(xí)一下CSS省容。首先是陰影怎么來的就讓我困擾了很久抖拴。我實(shí)在想不明白怎么通過Box-Shadow呈現(xiàn)這樣的陰影效果⌒冉罚苦惱中向公司的老司機(jī)請教阿宅，他淡淡的說：
“你沒看出來這所謂的陰影是個長方形嗎×耄”
瞬間感覺自己智商-100.....好吧洒放，原來所謂的陰影是漸變透明長方形，這樣瞬間難度就降低N個Level了伐弹。
然后坑又來了拉馋，正常來說實(shí)現(xiàn)陰影部分的重疊只需要使用Z-index即可，但是我不管怎么設(shè)置Z-index惨好，陰影部分的重疊總是無法達(dá)到我的要求。于是請教老司機(jī)随闺，看了張鑫旭的博客日川，弄了半天終于弄明白了。
于是矩乐，順便寫個博客總結(jié)一下皮毛龄句。
一.層疊上下文回论。
最開始我是懵逼的，沒聽過什么層疊上下文分歇，但是說Z-index傀蓉，我還是知道的。講白了就是以你為平面建立一個坐標(biāo)軸职抡，上下為Y軸葬燎，左右為X軸，Z軸則是縱深了缚甩。層疊上下文可以理解為有縱深順序排列的元素這么說應(yīng)該比較好理解了谱净。
二.層疊水平。
層疊水平?jīng)Q定了同一個層疊上下文元素中元素在Z軸上的顯示順序擅威。而普通元素的層疊水平優(yōu)先由層疊上下文決定壕探，因此，層疊水平的比較只有在當(dāng)前層疊上下文元素中才有意義郊丛。這么說起來比較繞李请，可以理解為層疊上下文是一個實(shí)力很強(qiáng)的人，而層疊水平是他們家養(yǎng)的狗厉熟。狗叫的再厲害捻艳，打狗還是要看主人，層疊水平鬧的再厲害庆猫，還是要看層疊上下文元素來決定位置认轨。
三.層疊順序。
層疊順序月培，Stacking order.這就是真正表示Z軸排列順序的因素了嘁字。層疊上下文和層疊水平是概念，而這里的層疊順序是規(guī)則杉畜。你可以去理解層疊上下文和層疊水平是什么纪蜒，而層疊順序，只需要你遵守此叠。
簡單來說纯续，他們之間的順序可以看這張圖（圖背下來就可以）
總之，如果不是特別的需求灭袁，一般遵守這個圖猬错，而在這個圖之內(nèi)的內(nèi)容，遵循原則：
誰大誰上：當(dāng)具有明顯的層疊水平標(biāo)示的時候茸歧，如識別的z-indx值倦炒，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個软瞎。通俗講就是官大的壓死官小的逢唤。
后來居上：當(dāng)元素的層疊水平一致拉讯、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素鳖藕。
最終還是把東西做出來了魔慷，放在Demo里了~效果是這樣的（點(diǎn)我）
嗯，感覺做了這個東西還是挺有收獲的著恩。繼續(xù)加油院尔。
