1.css3阴影用到的知识点：阴影box-shadow和插入：after before

　　HTML部分：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div class="box case-content">
  9.             <h1>卡片阴影效果</h1>
  10.         </div>
  11.     </body>
  12. </html>

　　CSS部分：

  1.         <style type="text/css">
  2.             .box {
  3.                 width: 70%;
  4.                 height: 200px;
  5.                 margin: 50px auto;
  6.                 background-color: #fff;
  7.             }
  8.             .box h1 {
  9.                 font-size: 20px;
  10.                 line-height: 200px;
  11.                 text-align: center;
  12.             }
  13.             .case-content {
  14.                 position: relative;
  15.                 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  16.                 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  17.                 box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  18.                 -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  19.             }
  20.  
  21.             .case-content:before ,.case-content:after{
  22.                 z-index: -1;
  23.                 content: "";
  24.                 background-color: #foo;
  25.                 position: absolute;
  26.                 top: 50%;
  27.                 bottom: 0;
  28.                 left: 10px;
  29.                 right: 10px;
  30.                 -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
  31.                 -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
  32.                 box-shadow: 0 0 20px rgba(0,0,0,0.8);
  33.                 -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
  34.                 border-radius: 100px/10px;
  35.             }

　　备注：

1. css卡片阴影效果用到两个伪元素:after、before.

(1)、“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后；

(2)、伪元素如果没有设置“content”属性，伪元素是无用的；

浏览器支持:before 和 :after 伪元素栈，像这样：

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。
  • 唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。

2.inset用法:

(1)、inset是从元素侧边进行投影,但是只渲染盒子内部的,丢弃外部的阴影而已.

css3卡片阴影效果的更多相关文章

  1. css3边框阴影效果

    下面来说下css3阴影的语法: box-shadow:none | <shadow> [ , <shadow> ]* <shadow> = inset? & ...

  2. CSS3卡片旋转效果

    HTML: <div id="rotate"> <div id="rotate_wrap"> <div id="fron ...

  3. css3 drop-shaow阴影效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. css3 边框阴影效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3 Box-shadow 阴影效果用法

    一.基本用法: 二.内阴影用法: 三.阴影扩展长度值: box-shadow: 4rpx 4rpx 8rpx #aaa;

  6. css3 属性阴影效果--box-shadow,text-shadow

    1.text-shadow:h-shadow v-shadow blur color; h-shadow:水平阴影的位置,可以是负值,正值向右,负值向左 v-shadow:水平阴影的位置,可以是负值, ...

  7. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  8. PIE使IE浏览器支持CSS3属性（圆角、阴影、渐变）

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  9. h5面试题集合

    一.闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包三个特性: 1.函数嵌套函数 ; ...

随机推荐

  1. DataTable 数字排序问题

    问题:DataTable 的默认排序功能是按字符来排的.在js里,把数字当字符串来排序会很大的问题,例如:"2" > "11" 返回的是 true 解决办 ...

  2. MySQL5.7修改wait_timeout参数

    参考:https://blog.csdn.net/ivory_town1/article/details/77702357 1.修改参数配置文件 vi /etc/my.cnf [mysqld] wai ...

  3. rxjs debounceTime减少搜索的频率

    debounceTime用来降低事件的触发频率 ,接收以毫秒为单位的参数 它所做的操作是,在一定时间范围内不管产生了多少事件,它只放第一个过去,剩下的都将舍弃 html: <div class= ...

  4. “无法从节点xx检索exectask的版本” 原因分析

    客户有一套部署在Window 2008 R2 sp环境下的12.1.0.2 RAC环境,该RAC基于策略管理.因为业务需要,现在需要更换部分设备——踢出两台2路的服务器(节点名称分别为racnode2 ...

  5. 在ensp上配置基于接口地址池的DHCP

    原理 实验模拟 实验拓扑 相关参数 开启dhcp服务 开启接口的dhcp服务功能,指定从接口地址池分配(接口1一样) 配置接口DHCP服务租期(租期默认是一天) 设置保留地址 设置dns 我们在pc1 ...

  6. SQlL Server ----- 通过年月进行查询

    websit  中的代码. 不修改 对控件进行修改,展示年月 WdatePicker({ dateFmt: 'yyyy-MM', isShowToday: false, isShowClear: fa ...

  7. Docker下打包FastDFS镜像以及上传遇到的问题

    官方地址:https://github.com/happyfish100/fastdfs 一.先下载个包,然后解压(自己找个目录下载即可) [root@localhost soft]# wget ht ...

  8. 22 Oracle数据库基础入门

    1.Oracle数据库的介绍 ORACLE 数据库系统是美国ORACLE 公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或 B/S 体 ...

  9. [转帖]Linux超级用户root口令忘记怎么办？

    Linux超级用户root口令忘记怎么办? 2010-05-10 12:15:00 monkey_d_meng 阅读数 5535  收藏 更多 分类专栏: Linux   版权声明:本文为博主原创文章 ...

  10. Kubernetes集群中Jmeter对公司演示的压力测试

    6分钟阅读 背景 压力测试是评估Web应用程序性能的有效方法.此外,越来越多的Web应用程序被分解为几个微服务,每个微服务的性能可能会有所不同,因为有些是计算密集型的,而有些是IO密集型的. 基于微服 ...