css3 书页卷角阴影

时间：

分类：

css3

字数：

368 字

时长：

大约需要 1 分钟

次数：

0 人阅读

利用 css3 box-shadow 属性，可以实现各种阴影效果，本文使用该属性实现书页卷角阴影。

效果：

内容区域

源码：

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
41
42
43
44
45
46
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书页阴影效果</title>
  <style>
  .box {
    width: 400px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
  }
  .box:before,
  .box:after {
    content: "";
    position: absolute;
    transform: rotate(-3deg);
    bottom: 15px;
    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
    height: 20px;
    left: 3px;
    max-width: 300px;
    width: 40%;
  }
  .box:after {
    transform: rotate(3deg);
    left: auto;
    right: 3px;
  }
  .box .content {
    position: relative;
    z-index: 2;
    font-size: 13px;
    text-align: center;
    background: #fff;
    padding: 10px;
    height: 200px;
  }
  </style>
</head>  
<body>  
  <div class="box"><div class="content">内容区域</div></div>
</body>  
</html>

巧用 css 的伪对象选择器 after 、 before 可以在书写样式时带来极大方便。

此处使用伪对象 after 、 before 设置 box 左右两个卷角，利用 box-shadow 和旋转 transform 属性，调整位置达到卷角视觉效果，再设置 content 的 z-index 属性让内容浮在阴影之上。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-03-25/css3-box-shadow/

如果您觉得文章不错，可以请我喝一杯咖啡！

赏