問(wèn)題描述

css 怎么實(shí)現(xiàn)像書(shū)籍裝訂線的效果？不用圖片的純css3實(shí)現(xiàn)

問(wèn)題解答

{ width: 150px; height: 150px; margin: 20% auto; background-color: white; background-image: repeating-linear-gradient(to right, #aaa 5%, #eee 10%, #ccc 15%); box-shadow: 5px 5px 2px #eee; border-radius: 5px;}

效果：

repeating-linear-gradient(to right, #aaa 5%, #eee 10%, #ccc 15%);

最主要是這句，重復(fù)的線性漸變，第一個(gè)參數(shù)向右，后面三個(gè)是顏色漸變點(diǎn)和位置，比如#aaa 5%就是從5%的地方開(kāi)始漸變，而5%以前就是純的#aaa的顏色，后面兩個(gè)同理，然后重復(fù)這個(gè)漸變。

和你那個(gè)鋸齒狀的問(wèn)題答案是一樣的使用css3的linear-gradient