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. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器出现no compatible source was found for this media问题的解决

    背景分析 EasyDSS流媒体解决方案总体可划分成三个部分:前端视频源设备(PC.手机.摄像机)流媒体数据获取并即时回传.流媒体服务器端直播和录像与回放.客户端直播播放与录像检索回放.前端推流我们使用 ...

  2. 如何利用Docker构建基于DevOps的全自动CI

    来自用户的DevOps实践分享,分享从开发代码到生产环境部署的一条龙操作的实践及经验, 包含工具技术的选型及考量.私有代码库与私有镜像库的应用等. (一)容器服务的Rancher选型 1.为什么说是下 ...

  3. Spring中WebMvcConfigurer用到的JDK8特性

    闲来无聊,随便翻看项目,发现WebMvcConfigurerAdapter已经过时了,它的作用也不用说了,就是起到适配器的作用,让实现类不用实现所有方法,可以根据实际需要去实现需要的方法. @Depr ...

  4. 安装cnpm出现问题

    安装cnpm: 命令行中输入   npm install -g cnpm --registry=http://registry.npm.taobao.org 报:cnpm不是内部命令 解决方法:设置环 ...

  5. C++分治策略实现快速排序

    问题描述: 给定一个未知顺序的n个元素组成的数组,现要利用快速排序算法对这n个元素进行非递减排序. 细节须知: (1)代码实现了利用递归对数组进行快速排序,其中limit为从已有的随机数文件中输入的所 ...

  6. 同类控件的统一操作（以TCHECKBOX为例）

    https://www.cnblogs.com/gaodu2003/archive/2008/12/15/1355355.html Procedure UnCheck; var i: integer; ...

  7. C语言：求π

    1835: 圆的面积 本题的关键在于如何求π: 今天先给给大家介绍一种针对本题的方法——利用反三角函数求π. 在高数中arcsin(0)=arccos(1)=π,不过编译器中并没有arcsin和arc ...

  8. 1139 First Contact PAT (Advanced Level)

    原题链接: https://pintia.cn/problem-sets/994805342720868352/problems/994805344776077312 测试点分析: 首先来分析一下测试 ...

  9. k8s 运行应用

    一.deployment 创建过程 kubect创建deployment —> deployment 创建ReplicaSet—>根据ReplicaSet 创建Pod 命名方式 relic ...

  10. 【2】【典型一维动态规划】【剑指offer+leetcode53】连续子数组的最大和

    HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量中包含负数 ...