# CSS 效果实现

# 一、CSS3 毛玻璃效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css" />
        <title>CSS3毛玻璃</title>
    </head>
    <body>
        <div class="container">
            <div class="title">你好</div>
        </div>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
.container {
    background: url(./image/vue3.png) 0 / cover fixed;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 500px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22