图像阴影
coderljw 2024-10-13 小于 1 分钟
利用 filter 制造伪阴影
<main>
<section></section>
</main>
1
2
3
2
3
main {
height: 400px;
display: grid;
place-items: center;
}
section {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: url(../../images/Wives/BingBing.webp) center/cover no-repeat;
}
section::after {
content: ' ';
position: absolute;
top: 7%;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
filter: blur(10px) brightness(80%) opacity(0.8);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
