同步发布：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 之书页阴影效果的更多相关文章

  1. 怎样使用CSS3实现书页（书本）卷角效果

    我们有时候想在页面显示一个公告或用户提示信息. 一个经常使用设计是使用书签形状. 我们能够给书签加入卷角效果.以使其更为逼真.所谓的"卷角"实际上能够用小角度倾斜的阴影效果来模拟. ...

  2. CSS3 -web-box-shadow实现阴影效果

    -webkit-box-shadow:2px -2px 10px #06c; 给元素添加阴影效果 text-shadow 是给文本添加阴影效果属性同上 形成的阴影跟阴影本体大小一致,四个属性分别代表 ...

  3. CSS3 box-shadow 内外阴影效果

    说明 box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果.定义多个阴影,使用逗号分隔. 语法 box-shadow: none | [inset? && [<o ...

  4. 一个CSS3滤镜Drop-shadow阴影效果

    <html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/cs ...

  5. 用CSS3实现带有阴影效果和颜色渐变的按钮

    这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片:本想直接在这个页面下嵌html的,,试了后发现有些cs ...

  6. CSS3不遥远，几个特性你要知道

    CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性.尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的.CSS3中的5 ...

  7. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  8. jQuery实现页面元素智能定位

    实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...

  9. CSS_跳动的心

    详细教程CSS3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. ASP.NET WebApi 学习与实践系列(1)---如何创建 WebApi

    写在前面 最近在做一个app的时候发现需要写后台服务.所以,在考虑是使用webapi还是使用webserver来写这个后台服务的时候.爱纠结的我,最后还是选择了使用webapi来写这个后台服务. 原因 ...

  2. sqlserver还原差异备份

    因为之前遇到还原差异备份,最开始遇到SQLServer报错:"无法还原日志备份或差异备份,因为没有文件可用于前滚".查阅很多资料后,终于得到解决.收集整理成这篇随笔. 问题原因:出 ...

  3. Deployment.spec.selector.matchLables实验解释

    原文:https://cloud.tencent.com/developer/article/1394657 Deployment.spec.selector.matchLables实验解释 作者: ...

  4. 自学Python编程的第六天(最后代码有更好的请告诉我)----------来自苦逼的转行人

    2019-09-16-23:09:06 自学Python的第六天,也是写博客的第六天 今天学的内容是有关dict字典的用法 看视频加上练习,目前还没遇到有难点,但是感觉很不好的样子 没有难点以后突然出 ...

  5. loadrunner通过字符串左右边界提取字符串

    /****** *函数名称:strcut *函数说明:通过左边界.右边界,从字符串中截取子字符串 *注意事项:会申请新的内存,需要手动释放 ******/ void strcut(char *strS ...

  6. CentOS 下运行.net Core程序

    系统: 阿里云的默认 CentOS 7.5 镜像 项目环境:.Net Core 2.2 一.安装.Net Core的运行环境 第一步,如果是一台新的服务器,可以升级一下系统的基础软件.如果没有必要也可 ...

  7. Shallow copy and Deep copy

    Shallow copy and Deep copy 第一部分: 一.来自wikipidia的解释: Shallow copy One method of copying an object is t ...

  8. Guava Cache用法介绍

    背景 缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用.在日长开发有很多场合,有一些数据量不是很大,不会经常改动,并且访问非常频繁.但是由于受限于硬盘IO的性能或者远程网络 ...

  9. Linux防火墙Firewall-cmd 基础

    一.简介 ​ firewall-cmd 是firewalld服务的一个命令行客户端,提供了对防火墙规则的增删查改.firewalld自身并不具备防火墙的功能.它和iptables一样需要通过内核net ...

  10. SQL与NoSQL区别--商业SQL数据库衰落--oracle面临困境

    转自:商用数据库之死:Oracle 面临困境 这二十年来,商业数据库市场仍然是 IT 行业最稳定.最具黏性的领域之一,Oracle.IBM 和微软三家厂商瓜分了 80% 的份额.然而,我们认为这个领域 ...