css3 怎么實現像書籍裝訂線的效果？

問題描述

css 怎么實現像書籍裝訂線的效果？不用圖片的純css3實現

問題解答

{ 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%);

最主要是這句，重復的線性漸變，第一個參數向右，后面三個是顏色漸變點和位置，比如#aaa 5%就是從5%的地方開始漸變，而5%以前就是純的#aaa的顏色，后面兩個同理，然后重復這個漸變。

和你那個鋸齒狀的問題答案是一樣的使用css3的linear-gradient