CSS3曲线阴影与翘角阴影_css翻角阴影

作者：Monodyee | 2024-03-18 23:15:02

踩

css翻角阴影

曲线阴影：利用：after和：before伪类创造两个与父级相同的元素，利用border-radius实现曲线阴影。
这里写图片描述
翘角阴影：同样是利用上面两个伪类创造元素，利用transform变形与旋转实现角度阴影具体代码：

demo下载
 慕课网视频
曲线阴影
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现曲线阴影和翘边阴影</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap curve">
        <h1>Shadow Curve</h1>
    </div>  
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13

css

body{
    font-family: Arial;
    font-size: 20px;
}
body,ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.wrap{
    position: relative;
    width: 60%;
    height: 200px;
    margin: 50px auto;
    text-align: center;
    line-height: 200px;
    background-color:#fff; 
}
.curve{
    height: 200px;
    position: relative;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3),
                0px 0px 20px rgba(255,0,0,0.1) inset;
}
.curve:after,.curve:before{
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    bottom: 0;
    left: 16px;
    right: 16px;
    background: red;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 
    border-radius: 100px/10px;
}
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
26
27
28
29
30
31
32
33
34
35
36

翘角阴影
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS翘边阴影</title>
    <link rel="stylesheet" href="css/Alice.css">
</head>
<body>
    <ul> 
        <li>
            <img src="images/photo1.jpg" alt="" />
        </li>
        <li>
            <img src="images/photo2.jpg" alt="" />
        </li>
        <li>
            <img src="images/photo3.jpg" alt="" />
        </li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CSS

ul{
    width: 1200px;
    height: 240px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
}
ul li{
    position: relative;
    width: 340px;
    height:240px;
    float: left;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    background: #fff;
    display: flex;
    align-items: center; 
    justify-content: center;
}
ul img{
    width: 300px;
    height: 200px;
}
ul li:before,ul li:after{
    content: '';
    position: absolute;
    z-index: -2;
    bottom: 19px;
    width: 90%;
    height: 80%;
    background-color: transparent;
    box-shadow:0px 8px 20px rgba(0,0,0,0.8);
    transform:skewX(10deg) rotate(5deg);
}
ul li:before{
    left: 12px;
}
ul li:after{
    right: 12px;
    transform:skewX(-10deg) rotate(-5deg);
}
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/266098