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. OpenShift 4.2 Service Mesh

    1.和社区版Istio的区别 OpenShift 4.2的Service Mesh和upstream的Istio项目的增强,除了产品化之外,借用官方文档,区别在于: Red Hat OpenShift ...

  2. Vue 组件封装发布到npm 报错 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

    Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 原因是 没有导出 export default { name:& ...

  3. python 科学计算基础库安装

    1.numpyNumPy(Numeric Python)是用Python进行科学计算的基本软件包. NumPy是Python编程语言的扩展,增加了对大型多维数组和矩阵的支持,以及一个大型的高级数学函数 ...

  4. oracle python操作 增删改查

    oracle删除 删除表内容 truncate table new_userinfo; 删除表 drop table new_userinfo; 1.首先,python链接oracle数据库需要配置好 ...

  5. 【LOJ2292】[THUSC2016]成绩单（区间DP）

    题目 LOJ2292 分析 比较神奇的一个区间 DP ,我看了很多题解都没看懂,大约是我比较菜罢. 先明确一下题意:abcde 取完 c 后变成 abde ,可以取 bd 这样取 c 后新增的连续段. ...

  6. kafka的分区

    分区会均匀的分配到不同的broke上,即不同的机器上.

  7. Linux下使用matlab在后台默默的运行.m文件（无界面形式）

    Linux下使用matlab在后台默默的运行.m文件(无界面形式)本主在Ubuntu18.04LTS上已经安装了matlab直接运行Matlab$ matlab会启动 matlab,出现启动界面但想要 ...

  8. redis常用命令及持久化机制

    redis  常用命令 查找redis服务文件 find / -name  redis-server 查找配置文件 find / -name redis.conf 启动服务时候,要指定配置文件 启动r ...

  9. Flask源码之：配置加载

    加载配置文件的思路: 1. 读取配置文件中的所有键值对,并将键值对全都放到Config对象.(Config是一个字典,因为它继承了Dict) 2. 把包含所有配置文件的Config对象,赋值给 app ...

  10. golang之defer

    概述 对于资源释放,有很多不同的实现方式,不同语言也有不同的惯用方法. C语言 :手动管理 Golang :defer Python :上下文管理器contexManager C++ : 作用域和析构 ...