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

　　HTML部分：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div class="box case-content">

            <h1>卡片阴影效果</h1>

        </div>

    </body>

</html>

　　CSS部分：

        <style type="text/css">

            .box {

                width: 70%;

                height: 200px;

                margin: 50px auto;

                background-color: #fff;

            }

            .box h1 {

                font-size: 20px;

                line-height: 200px;

                text-align: center;

            }

            .case-content {

                position: relative;

                -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

                -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

                box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

                -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

            }

            .case-content:before ,.case-content:after{

                z-index: -1;

                content: "";

                background-color: #foo;

                position: absolute;

                top: 50%;

                bottom: 0;

                left: 10px;

                right: 10px;

                -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);

                -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);

                box-shadow: 0 0 20px rgba(0,0,0,0.8);

                -o-box-shadow:0 0 20px rgba(0,0,0,0.8);

                border-radius: 100px/10px;

            }

　　备注：

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. iOS - 判断程序每天只执行一次

    当进行操作的时候记录操作时间存在偏好设置当中,当再次点击的时候获取现在的时间然后和之前记录的时间进行比较.如果是一天那么就提示“今天已经操作过了”,如果不是一天,那么可以正常操作,然后记录操作时间.如 ...

  2. Maya编程——沿Curve绘制圆柱

    操作流程: 1. VS运行代码,生成插件 2. 打开Maya绘制曲线,加载插件 3. 选中绘制的曲线,运行插件 Posts1.0 代码: #include <maya/MSimple.h> ...

  3. linux python 安装 pymssql

    其实也不是很完整的. 我主要在dockers中的alpine linux 下进行开发. 这里主要说的就是如何在alpine下安装pymssql 多级依赖 pymssq 依赖 Cython , Cyth ...

  4. idea修改maven项目名

    1.修改pom.xml中相关 <artifactId>seal-hn</artifactId><name>seal-hn</name><descr ...

  5. Oracle 实现表中id字段自增长

    Oracle 实现表中id字段自增长 最近正在学习Oracle的时候发现Oracle表中的字段不能像mysql中那样可以用auto increment修饰字段从而让id这种主键字段实现自增长. 那Or ...

  6. centos7安装rsync及两台机器进行文件同步

    安装及配置 yum -y install rsync #启动rsync服务 systemctl start rsyncd.service systemctl enable rsyncd.service ...

  7. 不同版本的ArcMap在Oracle中创建镶嵌数据集的不同行为

    如果不同版本的ArcMap连接到同一个Oracle数据库上,分别执行"创建镶嵌数据集",它们的行为是一样的吗? 答案是:不一样,会有细微的差别 在本例中,ArcMap的版本分别是1 ...

  8. JS系列：函数function

    ### 函数 function > 在js中函数就是一个方法(一个功能体)基于这个函数,一般是为了实现某个功能. ``` var total =10; total+=10; total=tota ...

  9. BJFU—214基于链式存储结构的图书信息表的创建和输出

    #include<stdio.h>#include<stdlib.h>#define MAX 100 typedef struct bNode{ double no; char ...

  10. 挂载一个NFS共享

    在 system2 上挂载一个来自 system1.group8.example.com 的NFS共享,并符合下列要求: 1./public 挂载在下面的目录上 /mnt/nfsmount 2./pr ...