幾個樣式效果

（1） 磨砂標簽

---

background-color: rgba(28, 28, 28, 0.45);font-size: 12px;display: inline-block;color: rgba(255, 255, 255, 0.85);margin-right: 8px;backdrop-filter: blur(10px); // 磨砂效果

---

（2）漸變文字顏色

.caseChooseLabel{background-image: linear-gradient(-69deg, #CCAB8D 0%, #A57C57 100%);-webkit-background-clip:text; -webkit-text-fill-color:transparent; width: 81px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

---

（3）修改圖片顏色

（4）hover圖片緩慢移動

（5）學習濾鏡的參考文檔

https://www.icode9.com/content-4-440958.html

總結

以上是生活随笔為你收集整理的CSS磨砂效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。