今天的代碼以Css3 為基礎(chǔ)來演示。閑話少說警检,直接畫害淤。
先創(chuàng)建一個(gè) index.html 文件窥摄,引用 style.css 樣式單,主要工作在 style.css 中完成鸽凶。定義一個(gè) div 給他類為 mustache玻侥。
CSS 想必大家都很熟吧凑兰。但可能代碼中的 currentColor 對(duì)于大家會(huì)有點(diǎn)陌生姑食,這里的 currentColor = color 音半。currentColor 的顏色值就是當(dāng)前元素的顏色值 black贡蓖。currentColor 會(huì)隨之變化。
需要 CSS 中的 shadow 實(shí)現(xiàn)機(jī)制有所了解,CSS 提供 shadow 功能仅父,我們可以活用一個(gè)功能來做一些 magic 的事 笙纤。大家有時(shí)間可以下功夫好好研究一下省容。功能強(qiáng)大腥椒,這里給 shadow 的模糊和擴(kuò)散給 0候衍,之所以給 0 就是讓 shadow 邊緣尖銳蛉鹿,看效果。
我們這里需要給元素一個(gè)絕對(duì)位置领追,然后給 shadow 一個(gè)較大的偏移量绒窑,這樣 shadow 就脫離真身些膨,成為真身的替身分歇。
再畫一個(gè)圓职抡,同一元素支持多個(gè) shadow 缚甩。我們就再來繪制一個(gè) shadow 給這個(gè) shadow 不同于前一個(gè)的偏移量。
我都看兩個(gè) shadow, 然后可以隱藏 div 真身 ,只留下他的 shadow李请,在拿出來 border 這里利器导盅,這都是 css 的秘密武器白翻。還有就是 before 和 after 這兩個(gè)偽元素绢片,也是經(jīng)常用到的CSS 功能底循。
每個(gè)圖形都有通過 before 來繪制出一個(gè)元素此叠,我們給他的內(nèi)容為空 content ,然后給一個(gè)大大的底邊。
最后用一些radius 做一些 magic 的事窗看,我想最初設(shè)計(jì) CSS 人倦炒,也沒想到開發(fā)人員今天把他玩如此的心應(yīng)手逢唤,做出如此 magic 的事。
通過給背景一個(gè)顏色魔慷,以便觀察胡子個(gè)個(gè)部分之間的關(guān)系院尔。
圓角也會(huì)影響到邊框,這是本次分享的難點(diǎn)栋盹,希望大家能理解例获,如果不理解可以自己寫幾個(gè)小例子來體會(huì)一下曹仗。
我們?nèi)サ糁氨阌谟^察的紅色部分整葡。
現(xiàn)在形狀基本與我們預(yù)期的效果已經(jīng)很接近了,但是他位置還不對(duì)旬渠,我需要通過旋轉(zhuǎn)的中心來調(diào)整胡子位置告丢。
調(diào)整旋轉(zhuǎn)的圓心照捡,根據(jù)新的坐標(biāo)點(diǎn)旋轉(zhuǎn)就得到我們想要結(jié)果话侧。
剩下半邊大家可以嘗試自己根據(jù)上面的提示畫一下悲立。