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. H3C 开局设置

    简介: 系统菜单  即 [H3C] 模式 一:恢复出厂设置 这个没什么说的,必须Console连接. 连上以后,在启动时Ctrl+B,进入管理启动菜单,删除文件,删除配置文件然后重启即可. Ctrl+ ...

  2. QuickSortDemo

    package com.suning.sntcscase.controller.MutiThread; import static jdk.nashorn.internal.objects.Globa ...

  3. koa2 post请求ctx.request.body空获取不到的解决办法

    header请求头添加Content-type: application/json

  4. Java分布式：分布式服务框架——ZooKeeper

    Java分布式:ZooKeeper——核心概念 ZooKeeper 统一配置管理 统一命名服务 分布式锁

  5. Gerrit - 一些基本用法

    1 - 主配置文件 主配置文件位于$GERRIT_SITE/etc/gerrit.config目录 [gerrit@mt101 ~]$ cat gerrit_testsite/etc/gerrit.c ...

  6. Apache Kafka® is a distributed streaming platform

    Kafka Connect简介 我们知道过去对于Kafka的定义是分布式,分区化的,带备份机制的日志提交服务.也就是一个分布式的消息队列,这也是他最常见的用法.但是Kafka不止于此,打开最新的官网. ...

  7. 读文件时出现这个错误 'utf-8' codec can't decode byte 0xba in position 21: invalid start byte

    ''' file2 文件内容: 很任性wheniwasyoung ''' 源代码: f = open("file2",'r',encoding="utf-8") ...

  8. stvd使用中的一些问题

    1.stm8_interrupt_vector.c 会莫名其妙的自动出现,而且都是在项目目录下.进行如下操作 2.stvd编译时遇到no default placement for segment . ...

  9. MNIST机器学习入门(二)

    在前一个博客中,我们已经对MNIST 数据集和TensorFlow 中MNIST 数据集的载入有了基本的了解.本节将真正以TensorFlow 为工具,写一个手写体数字识别程序,使用的机器学习方法是S ...

  10. CF891E Lust 生成函数

    传送门 设在某一次操作之后的\(a\)数组变为了\(a'\)数组,那么\(\prod\limits_{i \neq x} a_i = \prod a_i - \prod a_i'\).那么就不难发现我 ...