<!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. Java中get()和set()作用

    一.前言 在程序的设计中,我们普遍的定义一个private变量,然后为这个变量加上get() .set()方法,那为何不直接定义一个public变量呢? 很多人是这样回答的: 1.关系到安全性的问题, ...

  2. 洛谷 P6362 平面欧几里得最小生成树

    题目描述 平面上有 \(n\) 个点,第 \(i\) 个点坐标为 \((x_i, y_i)\).连接 \(i, j\) 两点的边权为 \(\sqrt{(x_i - x_j) ^ 2 + (y_i - ...

  3. Spring Boot，Spring Cloud，Eureka，Actuator，Spring Boot Admin，Stream，Hystrix

    Spring Boot,Spring Cloud,Eureka,Actuator,Spring Boot Admin,Stream,Hystrix 一.Spring Cloud 之 Eureka. 1 ...

  4. JavaScript里处理数组的一些常用方法

    修改器方法: 1.pop() 方法从数组中删除最后一个元素 pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值. let arr2 = ['zh ...

  5. B 等差素数列

    B 等差素数列:2,3,5,7,11,13,....是素数序列.类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列.上边的数列公差为30,长度为6.2004年,格 ...

  6. hdu 6681 Rikka with Cake(扫描线)

    题意:给你一个n*m的的矩形框 现在又k条射线 问这个矩形框会被分为多少个区域 思路:之前的想法是枚举边界然后线段树扫一遍计算一下矩形个数 复杂度果断不行 后面发现其实答案就是交点数+1 然后就用线段 ...

  7. HDU5739 Fantasia【点双连通分量 割点】

    HDU5739 Fantasia 题意: 给出一张\(N\)个点的无向图\(G\),每个点都有权值\(w_i\),要求计算\(\sum_{i=1}^{N}i\cdot G_i % 1e9+7\) 其中 ...

  8. windows 系统下安装kibana和sense

    目前最新版本已经不需要安装sense了,而是使用Dev Tools工具: 下面进行下载和安装kibana. 点击下载:https://artifacts.elastic.co/downloads/ki ...

  9. 深入了解typeof与instanceof的使用场景及注意事项

    JavaScript中的数据类型分为两类,undefined,number,boolean,string,symbol,bigint,null[1]组成的基础类型和Object.Function.Ar ...

  10. 深入了解gradle和maven的区别

    目录 简介 gradle和maven的比较 可扩展性 性能比较 依赖的区别 从maven迁移到gradle 自动转换 转换依赖 转换repositories仓库 控制依赖的版本 多模块项目 profi ...