<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box11 {

            width: 300px;

            height: 100px;

            background: #ccc;

            border-radius: 10px;

            margin: 10px;

        }

        .shadow {

            position: relative;

            max-width: 270px;

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

        }

        .shadow::before, .shadow::after {

            content: "";

            position: absolute;

            z-index: -1;

        }

        .shadow::before, .shadow::after {

            content: "";

            position: absolute;

            z-index: -1;

            bottom: 15px;

            left: 10px;

            width: 50%;

            height: 20%;

        }

        .shadow::before, .shadow::after {

            content: "";

            position: absolute;

            z-index: -1;

            bottom: 15px;

            left: 10px;

            width: 50%;

            height: 20%;

            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);

            transform: rotate(-3deg);

        }

        .shadow::after {

            right: 10px;

            left: auto;

            transform: rotate(3deg);

        }

    </style>

</head>

<body>

<div class="box11 shadow"></div>

</body>

</html>

　　

CSS 阴影效果的更多相关文章

  1. 格式与布局 CSS阴影效果(Box-shadow)用法

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  2. Css - 基础的css阴影效果

    基本的css3阴影效果 width:971px; height:608px; border:1px solid #ccc; background-color:#fff; filter:progid:D ...

  3. css阴影效果

    moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px#888; box-shadow: 0 0 10px #888;

  4. css例子

    6.背景图像渐变的制作body{ background:#ccc url(xxx.gif)rpeat-x或y:} 7.给一个区块加上背景#branding{ width:700px: height:2 ...

  5. CSS构造颜色、背景与图像

    设定颜色 背景使用 图像使用 1.设定颜色 红色的几种合法定义;     #f00;     #ff0000;     Red;     Rgb(255,0,0);     Rgb(100%,0%,0 ...

  6. 22 , CSS 构造颜色、背景与图像

    1. 设定颜色 2. 背景使用 3. 图像使用 1.设定颜色 红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0%); 2.十六进制三 ...

  7. CSS3中border-radius、box-shadow与gradient那点事儿

    一.border-radius border-radius用于添加圆角边框,用处非常广泛. 1)一个值,代表了四个角 .radius-one { /* Safari 3-4, iOS 1-3.2, A ...

  8. mongodb入门级的视频教程-简易客户管理系统制作

    本套教程作为mongodb入门级的视频教程,首先讲解了mongodb的下载.安装,环境变量的设置.启动mongodb和将mongodb安装成为windows服务.然后进一步讲解了mongodb里面集合 ...

  9. IE之css3效果兼容

    一.兼容css阴影效果(ie滤镜) 1.Shadow,阴影 .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3 ...

随机推荐

  1. TCP IP SOCKET 笔记

    网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...

  2. 手机用itunes安装更新系统

    1.[Shift+更新]:仅对固件进行更新,保留现有资料和已经安装的程序.但是已经越狱的iPhone或iPad禁止使用此方法!否则有后遗症!没有越狱的iPhone或iPad则可以直接使用此方式.2.[ ...

  3. Go语言学习-import

    import我们在写Go代码的时候经常用到import这个命令用来导入包文件,而我们经常看到的方式参考如下:import("fmt")然后我们代码里面可以通过如下的方式调用fmt. ...

  4. 子网划分、变长子网掩码和TCP/IP排错__IP寻址排错

    1.Cisco推荐使用的排错四步曲: ping环回地址:ping NIC:ping默认网关和ping远端设备. 1. 打开DOS窗口并ping127.0.0.1.这是一个诊断或环回地址,如果你得到一个 ...

  5. maven基础学习-为什么要用maven,帮助解决了什么问题，怎么解决的，希望以后学习每个知识点都可以这样问下自己

    maven基础学习 第1章 Maven介绍 1.1 什么是Maven 1.1.1 什么是Maven Maven 的正确发音是[ˈmevən],而不是"马瘟"以及其他什么瘟.Mave ...

  6. codeforces #345 (Div. 1) D. Zip-line (线段树+最长上升子序列)

    Vasya has decided to build a zip-line on trees of a nearby forest. He wants the line to be as long a ...

  7. P3399 丝绸之路（DP）

    题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚.西亚和欧洲,将那里的香 ...

  8. STL中pair容器的用法

    1.定义pair容器 1 pair <int, int> p, p1; 2 //定义 [int,int] 型容器 //直接初始化了p的内容 pair<string,int>p( ...

  9. Hyper-V安装CentOS修改分辨率

    grubby --update-kernel=ALL --args="video=hyperv_fb:1600x900" reboot https://blog.csdn.net/ ...

  10. hutool学习总结

    1. 为什么要学习Hutool的使用 Hutool官网 中文写的已经很清楚了 Hutool是一款强力的工具类.封装了工作开发中一些常见的功能操作.避免重复造轮子,使用它大大提高的开发效率. 2. Hu ...