<!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. 在Ubuntu安装Docker

    1.查看Linux内核依赖 kernel version >= 3.8 查看代码: uname -a | awk '{split($3, arr, "-"); print a ...

  2. 【Oracle】SQL/92 执行多个表的连接

    内连接 外连接 自连接 交叉连接 1.内连接 表名 INNER JOIN 表名 ON 条件 等价于: FROM 表名, 表名 WHERE 条件 SELECT p.name, pt.name, pt.p ...

  3. 通过spring statemmachine 自定义构建属于自己的状态机（两种方式）

    spring 的stateMachine 相对于当前的版本,还是比较新颖的,但是对于合适的业务场景,使用起来还是十分的方便的.但是对于官网提供的文档,讲解的是十分的精简,要想更深入的了解其内部架构,只 ...

  4. Git实现1个项目2个地址1次推送

    Git实现1个项目2个地址1次推送 考虑到不需要pull操作,因此本方法适用于个人项目分别在两个平台或地址进行部署 给origin 增加一个可以push的地址 git remote set-url - ...

  5. 最短Hamilton路径（状压dp）

    最短Hamilton路径实际上就是状压dp,而且这是一道作为一个初学状压dp的我应该必做的题目 题目描述 给定一张 n(n≤20) 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 ...

  6. 【uva 1395】Slim Span（图论--最小生成树+结构体快速赋值 模版题）

    题意:给一个N(N<=100)个点的联通图(无自环和平行边),求苗条度(最大边-最小边的值)尽量小的生成树. 解法:枚举+Kruskal.先从小到大排序边,枚举选择的最小的边. 1 #inclu ...

  7. F - Count the Colors（线段树）

    Painting some colored segments on a line, some previously painted segments may be covered by some th ...

  8. Codeforces Round #672 (Div. 2 B. Rock and Lever (位运算)

    题意:给你一组数,求有多少对\((i,j)\),使得\(a_{i}\)&\(a_{j}\ge a_{i}\ xor\ a_{j}\). 题解:对于任意两个数的二进制来说,他们的最高位要么相同要 ...

  9. c#小灶——9.算术运算符

    算数运算符用来在程序中进行运算. 首先,了解最简单的加(+)减(-)乘(*)除(/)运算符: 举例 int a = 1; int b = 2; int c = a + b; Console.Write ...

  10. 连接MongoDb数据库 -- Python

    1.安装完mongoDb数据库后,如果需要我们的Python程序和MongoDb数据库进行交互,需要安装pymongo模块: 安装方式:采用pip install pymongo的方式 Microso ...