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. 【翻译】Flink Table Api & SQL — 性能调优 — 流式聚合

    本文翻译自官网:Streaming Aggregation  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table ...

  2. 【Maven学习】Eclipse使用maven问题集

    环境 jdk 1.8 eclipse 4.7 apache-maven-3.6.1 一.eclipse 编译maven工程步骤 1.Update Project 2.maven clean 3.mav ...

  3. Ubuntu下载源码并编译

    本文章将介绍如何在Ubunt下进行Linux源码下载,并进行简单的编译步骤. 1.下载linux源码 先查看对应的Ubuntu对应版本源码 $ sudo apt-cache search linux- ...

  4. python入门之垃圾回收机制

    目录 一 引入 二.什么是垃圾回收机制? 三.为什么要用垃圾回收机制? 四.垃圾回收机制原理分析 4.1.什么是引用计数? 4.2.引用计数扩展阅读 4.2.1 标记-清除 4.2.2 分代回收 一 ...

  5. 在ensp上配置RIPv2的认证

    原理 实验模拟 实验拓扑 测试连通性 搭建rip网络 查看路由表 R3模拟攻击首先把在自己的的ip通告网段 配置完成后查看一下路由表 可以看到已经非法获取R1R2的网段信息,那么现在我们R3可以向两个 ...

  6. SpringBoot整合websocket

    1.新增pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  7. celery 分布式异步任务框架(celery简单使用、celery多任务结构、celery定时任务、celery计划任务、celery在Django项目中使用Python脚本调用Django环境)

    一.celery简介: Celery 是一个强大的 分布式任务队列 的 异步处理框架,它可以让任务的执行完全脱离主程序,甚至可以被分配到其他主机上运行.我们通常使用它来实现异步任务(async tas ...

  8. golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

    micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...

  9. Python全栈开发相关课程

    Python全栈开发 Python入门 Python安装 Pycharm安装.激活.使用 Python基础 Python语法 Python数据类型 Python进阶 面向对象 网络编程 并发编程 数据 ...

  10. 构建helm chart应用

    使用helm命令创建基础目录 helm create t2cp [root@node04 ~]# tree t2cp t2cp ├── charts ├── Chart.yaml ├── templa ...