滑动门
a设置背景左侧,padding撑开宽度
span设置背景右侧,padding撑开宽度,其余由文字撑开宽度
小三角(内容为空,四边边框一个有颜色其余为透明)
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent transparent yellow transparent;
border-top: none;
毛玻璃
html
<div class="card"></div>
<div class="card__circle">hello world</div>
css
.card {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
width: 300px;
height: 300px;
transform: translate(-150px,-150px);
background: linear-gradient(
to top right,
rgba(232, 247, 255, 0.636),
rgba(251, 251, 251, 0.8)
);
box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2);
// 模糊效果
backdrop-filter: blur(5px);// 关键属性
}
.card__circle {
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
background-color: skyblue;
border-radius: 50%;
margin: 0 auto;
}