文章詳情頁
css3 怎么實現像書籍裝訂線的效果?
瀏覽:239日期:2023-07-18 18:39:12
問題描述
css 怎么實現像書籍裝訂線的效果?不用圖片的純css3實現
問題解答
回答1:{ 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的顏色,后面兩個同理,然后重復這個漸變。
回答2:和你那個鋸齒狀的問題答案是一樣的使用css3的linear-gradient
標簽:
CSS
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化5. javascript - nodejs關于進程間發送句柄的一點疑問6. 配置Apache時,添加對PHP的支持時語法錯誤7. phpstudy8.1支持win11系統嗎?8. javascript - vue-router 地址改變數據未改變9. 實現bing搜索工具urlAPI提交10. javascript - 移動端上不能實現拖拽布局嗎?
排行榜

網公網安備