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. EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(二)使用Onvif协议进行设备RTSP地址获取

    背景介绍 EasyNVR最大的优势就是兼容性,通过RTSP协议接入传统网络摄像机.NVR.编码器等,使用RTSP协议接入能兼容市面上绝大多数网络摄像机等源设备,最大程度的提高整体方案的硬件设备的兼容性 ...

  2. fedora清理旧内核

    先查看已安装的内核: rpm -qa|grep kernel 然后查看下当前在用的内核: uname -r 最后是删除内核: yum remove xxxx  

  3. 数学黑洞：卡普雷卡尔常数的php算法实现

    首先看一篇文章: 英国广播公司报道,6174乍看没什么奇特之处,但是,自从1949年以来,它一直令数学家.数字控抓狂.痴迷. 不管你挑的四位数是什么,早早晚晚你都会遇到6174:而且,遇到6174就只 ...

  4. Eclipse 单个tomcat多个项目部署原理(tomcat配置的环境变量catalina.home和catalina.base)

    一:概念 catalina.home(安装目录):指向公用信息的位置,就是bin和lib的父目录. catalina.base(工作目录):指向每个Tomcat目录私有信息的位置,就是conf.log ...

  5. xunit 单元测试

    代码:GitHub 参考地址:https://github.com/Acumatica/xunit.autofac xunit +autofac进行单元测试 ①创建一个类库 引用nuget: xuni ...

  6. log4j Logger 使用简介

    项目结构: log4j.properties 内容: log4j.rootCategory=info,stdout log4j.appender.stdout=org.apache.log4j.Con ...

  7. 【idea】【sonarlint】指定文件夹扫描

    选择文件夹右键->Analyze->Analyze with SonarLint

  8. MD5用户密码加密工具类 MD5Util

    一般记录用户密码,我们都是通过MD5加密配置的形式.这里记录一下,MD5加密的工具类. package com.mms.utils; import java.security.MessageDiges ...

  9. SpringBoot2.x+Redis+nginx实现session共享和负载均衡

    1.创建SpringBoot项目添加依赖 <dependency> <groupId>org.springframework.session</groupId> & ...

  10. Linux查看CPU信息计算CPU核数量

    1. 物理CPU的个数: cat /proc/cpuinfo | grep "physical id" | sort | uniq | wc -l 2. 每个物理CPU的核心数量: ...