【Hello CSS】第八章-CSS圖形

• 做者：陳大魚頭
• github： KRISACHAN

前言

上一節留了一個問題：「爲何 currentColor 是駝峯命名？」。

其實也有小夥伴答對了，緣由就是由於 currentColor 是做爲 SVG 的屬性值存在，所以在 CSS 裏就保留了這個駝峯寫法，順便提一個冷知識：「 currentcolor 這種全小寫的方式也是容許的。 」

小知識分享完，本章開始分享 CSS圖形，經過 CSS 不一樣屬性間的組合，能夠勾勒出怎樣的圖形呢？下面咱們就簡單分享幾個簡單的DEMO。

免責聲明：因爲魚頭技術有限，因此若是DEMO不得各位大佬的心，請輕噴，噴重了魚頭會嚶嚶嚶的。

有趣的圖形

經過不一樣的CSS屬性，咱們能組合出不少有趣的 CSS 圖形。

粘連效果

效果如圖：

連接在此：

codepen.io/krischan77/…

磚頭效果

效果如圖：

連接在此：

codepen.io/krischan77/…

CSS圖標

效果如圖：

連接在此：

codepen.io/krischan77/…

圖片美化

CSS也是能夠實現美圖秀秀的濾鏡跟倒影效果滴。

濾鏡

連接在此：

codepen.io/krischan77/…

倒影

連接在此：

codepen.io/krischan77/…

原生組件美化

在咱們使用原生組件的時候，是否以爲樣式不能知足咱們的開發需求呢？不要緊，讓CSS來給你優化。

自定義滾動條

連接在此：

codepen.io/krischan77/…

表單控件

連接在此：

codepen.io/krischan77/…

後記

本章主要是分享一些用CSS屬性實現簡單的效果，雖然不是什麼讓人驚豔的東西，但其實也說明了只要咱們肯發揮想象，CSS必定會有迴應的，你們不妨多思考如何用不一樣的屬性組合成有趣的圖形吧。

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助你們更深入地瞭解而且提升CSS在各位開發者心目中的地位。因爲魚頭我水平有限，文筆有限，若是各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會很是感謝的；若是經過文章有任何想法或疑問，也但願各位能積極留言，咱們互相探討；若是經過本系列文章有所收穫，這就讓魚頭我喜不自勝了！

若是你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。