有趣的CSS題目(1): 左邊豎條的實現方法

chokcoco發表於2016-09-29

開本系列,討論一些有趣的 CSS 題目,拋開實用性而言,一些題目為了拓寬一下解決問題的思路,此外,涉及一些容易忽視的 CSS 細節。

解題不考慮相容性,題目天馬行空,想到什麼說什麼,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補習一下吧。

不斷更新,不斷更新,不斷更新,重要的事情說三遍。

所有題目彙總在我的 Github 。

題目1、下面這個圖形,只使用一個標籤,可以有多少種實現方式:

608782-20160921195001074-1905115525

假設我們的單標籤是一個 div:

定義如下通用CSS

法一:border

這個應該是最最最容易想到的了

法二:使用偽元素

一個標籤,算上 before 與 after 偽元素,其實算是有三個標籤,這也是很多單標籤作圖的基礎,本題中,使用偽元素可以輕易完成。

法三:外 box-shadow

盒陰影 box-shadow 大部分人都只是用了生成陰影,其實陰影可以有多重陰影,陰影不可以不虛化,這就需要去了解一下 box-shaodw 的每一個引數具體作用。使用 box-shaodw 解題

法四:內 box-shadow

盒陰影還有一個引數 inset ,用於設定內陰影,也可以完成:

法五:drop-shadow

drop-shadow 是 CSS3 新增濾鏡 filter 中的其中一個濾鏡,也可以生成陰影,不過它的數值引數個數只有 3 個,比之 box-shadow 少一個。

法六:漸變 linearGradient

靈活使用 CSS3 的漸變可以完成大量想不到的圖形,CSS3 的漸變分為線性漸變和徑向漸變,本題使用線性漸變,可以輕易解題:

法七:輪廓 outline

這個用的比較少,outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。這個方法算是下下之選。

 

法八、滾動條

這個方法由 小火柴的藍色理想 提供,通過改變滾動條樣式實現:

拋開實用性,僅僅是模擬出這個樣式的話,這個方法真的讓人眼前一亮。

 

上述就是想到的 8 種方法,不排除有沒想到的,希望有其他的方法可以在評論中提出,具體 8 種實現可以戳這裡看看:

codepen-單標籤左邊豎條的實現方式

See the Pen 單標籤左邊豎條的實現方式 by Chokcoco (@Chokcoco) on CodePen.

所有題目彙總在我的 Github ,發到部落格希望得到更多的交流。

到此本文結束,如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

打賞支援我寫出更多好文章,謝謝!

打賞作者

打賞支援我寫出更多好文章,謝謝!

任選一種支付方式

有趣的CSS題目(1): 左邊豎條的實現方法 有趣的CSS題目(1): 左邊豎條的實現方法

相關文章