CSS3 之书页卷角阴影效果
同步发布：https://blog.jijian.link/2020-03-25/css3-box-shadow/
视觉如下：
CSS3 之书页阴影效果：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>书页阴影效果</title> 5 <style> 6 .box { 7 width: 400px; 8 margin: 0 auto; 9 position: relative; 10 box-shadow: 1px 0 2px rgba(0, 0, 0, 0.16); 11 } 12 .box:before, 13 .box:after { 14 content: ""; 15 position: absolute; 16 -webkit-transform: rotate(-3deg); 17 transform: rotate(-3deg); 18 bottom: 15px; 19 box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3); 20 height: 20px; 21 left: 3px; 22 max-width: 300px; 23 width: 40%; 24 } 25 .box:after { 26 -webkit-transform: rotate(3deg); 27 transform: rotate(3deg); 28 left: auto; 29 right: 3px; 30 } 31 .box .content { 32 position: relative; 33 z-index: 2; 34 font-size: 13px; 35 text-align: center; 36 background: #fff; 37 padding: 10px; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="box"> 43 <div class="content"> 44 <p>测试文本</p> 45 <p>测试文本</p> 46 <p>测试文本</p> 47 <p>测试文本</p> 48 <p>测试文本</p> 49 <p>测试文本</p> 50 <p>测试文本</p> 51 </div> 52 </div> 53 </body> 54 </html>
总结：运用css的伪类选择器after，before设置box左右两个卷角，设置阴影（box-shadow）和旋转（transform）属性，调整位置达到卷角视觉效果，设置content的z-index属性让内容浮在阴影之上。
