一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的。纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果。

<div class="curved_box"></div>
.curved_box {
    display: inline-block;
    *display: inline;
    width: 200px;
    height: 248px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    position: relative;
    *zoom: 1;
}
.curved_box:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.curved_box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}
.curved_box:before, .curved_box:after {
    width: 70%;
    height: 55%;
    content: ' ';
    
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
    position: absolute;
    bottom: 10px;
    z-index: -1;
}

CSS3 box-shadow实现纸张的曲线投影效果的更多相关文章

  1. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

  2. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  3. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  4. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  5. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  6. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  7. CSS魔法堂:Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  8. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  9. HTML5 拖放:在相册中对照片进行排序

    1. [代码]index.html     <div class="albums">    <div class="album" id=&qu ...

随机推荐

  1. 简单ATM机功能实现及感想

    感想:  在那一天下午气喘吁吁的上了六楼 在建民的课上 都要带电脑 第一次上这样的课,每一次都是个段子 ,这一次考试是学前考试,什么也不知道 ,但是通过百度, 发现JAVA有很多还都和C语言相似的地方 ...

  2. 线程池之 newScheduledThreadPool中scheduleAtFixedRate(四个参数)

    转自:https://blog.csdn.net/weixin_35756522/article/details/81707276 说明:在处理消费数据的时候,统计tps,需要用一个线程监控来获得tp ...

  3. ScheduledThreadPoolExecutor 使用线程池执行定时任务

    转自:https://segmentfault.com/a/1190000008038848 在现实世界里,我们总是免不了要定期去做一件事情(比如上课)—— 在计算机的世界里,更是如此.比如我们手机每 ...

  4. Win7查看开关机记录

    通过系统日志可以查看,这里记得的日志很多,需要筛选一下,来个图片看的清楚: 事件ID的12,13就代表开关机,具体信息会在窗口下方显示.

  5. YUV420格式解析<转>

    在YUV420中,一个像素点对应一个Y,一个2X2的小方块对应一个U和V.对于所有YUV420图像,它们的Y值排列是完全相同的,因为只有Y的图像就是灰度图像. YUV420sp与YUV420p的数据格 ...

  6. Struts2中使用HttpServletRequest和HttpServletResponse

    一.非Ioc方式 这种方式主要是利用了com.opensymphony.xwork2.ActionContext类以及org.apache.struts2.ServletActionContext类, ...

  7. WDA-5-VIEW视图切换

    这一部分介绍同一窗口下不同视图之间的链接跳转. 前提:完成上一步骤MAIN视图ALV显示. 1.效果展示 点击ALV物料下划线链接,页面跳转到物料明细页面. 2.实现过程 基于上一步骤在MAIN页面显 ...

  8. Tornado的安装使用

    https://blog.csdn.net/a312024054/article/details/52207367 tornado原理: tornado的使用 import tornado.ioloo ...

  9. java 使用jsoup处理html字符

    依赖的jar <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artif ...

  10. vue:在路由跳转中使用拦截器

    1:首先在路由对象中的某一个具体的路由对象加这样一个属性 meta: {  requireAuth:true  } 2:然后在main.js中添加这段代码 router.beforeEach((to, ...