<!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. power network 电网——POJ1459

    Power Network Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 27282   Accepted: 14179 D ...

  2. SpringMVC听课笔记（一：SpringMVC概述）

    地址 :https://www.bilibili.com/video/av14907450 版本:4.x 概述: 概要: 一:SpringMVC概述 二:SpringMVC的 HelloWorld 三 ...

  3. Vue3.0短视频+直播|vue3+vite2+vant3仿抖音界面|vue3.x小视频实例

    基于vue3.0构建移动端仿抖音/快手短视频+直播实战项目Vue3-DouYin. 5G时代已来,短视频也越来越成为新一代年轻人的娱乐方式,在这个特殊之年,又将再一次成为新年俗! 基于vue3.x+v ...

  4. 希尔伯特曲线python3实现

    需要OpenGL库:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyopengl #coding:utf-8 from OpenGL.GL import * ...

  5. linux基础进阶命令详解（输出重定向(2>&1,1>&2,&>file)、输入重定向、管道符、通配符、三种引号、软连接、硬链接、根“/”、绝对路径vs相对路径）

    本章命令(共9个): 1 2 3 4 5 6 7 8 9 输出重定向 输入重定向 管道符 通配符 三种引号 软连接 硬链接 根"/" 绝对路径vs相对路径 1.输出重定向 作用:一 ...

  6. Linux常用习惯和技巧

    1.如果有些命令在执行时不断地在屏幕上输出信息,影响到后续命令的输入,则可以在执行命令时在末尾添加上一个&符号,这样命令将进入系统后台来执行.

  7. （13）Linux文件系统的优缺点

    通过文件系统的方式来组织磁盘存储和数据管理.有以下几个方面的好处. 数据的读取.管理操作变得简单 文件系统给用户提供了一个简单的操作界面,用户可以通过对文件系统的简单操作,实现对磁盘的管理.虽然 Li ...

  8. SQL系列总结——基础篇（一）

       数据库与表.列的关系其实就像是一个Excel工作薄(workbook)与Excel表格(sheet)以及表格中的列的关系一样.关系数据库中最基本的对象有3个:表.列.用户     基本的概念名词 ...

  9. 图的广度优先遍历算法（BFS）

    在上一篇文章我们用java演示了图的数据结构以及图涉及到的深度优先遍历算法,本篇文章将继续演示图的广度优先遍历算法.广度优先遍历算法主要是采用了分层的思想进行数据搜索.其中也需要使用另外一种数据结构队 ...

  10. CPU中的程序是怎么运行起来的（预告篇）

    总述     最近一位朋友问我,我开发的代码是怎么运行起来的,我就开始给他介绍代码的预编译.汇编.编译.链接然后到一般的文件属性,再到代码运行.但是大佬问了我一句,CPU到底是怎么执行到每一个逻辑的, ...