毛玻璃效果

body
{
/设置布局/
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;

}

.card
{
/设置布局/
position: relative;
display: flex;
justify-content: center;
align-items: center;
/设置card的大小/
width: 980px;
height:600px;

/*设置阴影*/
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
/*设置圆角*/
border-radius:15px;
/*设置上边界和左边界亮纹，使card有一种层次感*/
border-top: 1px solid rgba(255,255,255,0.5);
border-left: 1px solid rgba(255,255,255,0.5);

/*设置背景样式*/
background: rgba(255,255,255,0.1);
/*让透过card的底部元素模糊化,达到毛玻璃效果*/
backdrop-filter: blur(5px);

}

/简单设置以下card中字体样式/
.card h2
{
position: relative;
font-size: 3em;
color: rgba(255, 255, 255, 0.15);
}