先設(shè)置一個容器DIV

<div class="card"></div>

1. 設(shè)置一個好看的背景

.card {height: 100vh;background: radial-gradient(circle at 60% 90%,rgba(46, 103, 161, 1),transparent 60%),radial-gradient(circle at 20px 20px,rgba(46, 103, 161, 0.8),transparent 25%),#182336; }

2. 設(shè)置一個盒子樣式

.card {color: rgba(255, 255, 255, 0.8);position: absolute;left: 100px;top: 200px;z-index: 10;font-family: sans-serif;text-align: center;width: 300px;height: 500px;border-bottom: 1px solid rgba(255, 255, 255, 0.4);border-left: 1px solid rgba(255, 255, 255, 0.4);background: linear-gradient(to top right,rgba(90, 149, 207, 0.5),rgba(58, 76, 99, 0.8));box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),-10px 10px 20px rgba(255, 255, 255, 0.1);backdrop-filter: blur(6px); /* 元素后面區(qū)域添加模糊效果 */border-radius: 20px;// transform: rotate(-15deg); }

總結(jié)

以上是生活随笔為你收集整理的css 设置好看的背景效果（毛玻璃）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。