CSS3 之书页阴影效果

同步发布：https://blog.jijian.link/2020-03-25/css3-box-shadow/

视觉如下：

CSS3 之书页阴影效果：

 <html>

 <head>

     <meta charset="UTF-8">

     <title>书页阴影效果</title>

     <style>

     .box {

       width: 400px;

       margin: 0 auto;

       position: relative;

       box-shadow: 1px 0 2px rgba(0, 0, 0, 0.16);

     }

     .box:before,

     .box:after {

       content: "";

       position: absolute;

       -webkit-transform: rotate(-3deg);

       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 {

       -webkit-transform: rotate(3deg);

       transform: rotate(3deg);

       left: auto;

       right: 3px;

     }

     .box .content {

       position: relative;

       z-index: 2;

       font-size: 13px;

       text-align: center;

       background: #fff;

       padding: 10px;

     }

     </style>

 </head>

 <body>

   <div class="box">

     <div class="content">

       <p>测试文本</p>

       <p>测试文本</p>

       <p>测试文本</p>

       <p>测试文本</p>

       <p>测试文本</p>

       <p>测试文本</p>

       <p>测试文本</p>

     </div>

   </div>

 </body>

 </html>

总结：运用css的伪类选择器after，before设置box左右两个卷角，设置阴影（box-shadow）和旋转（transform）属性，调整位置达到卷角视觉效果，设置content的z-index属性让内容浮在阴影之上。

巴特西

CSS3 之书页阴影效果

最新文章

热门文章