1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>Demo: CSS drop-shadows without images – Nicolas Gallagher</title>
  6.      <meta name="description" content="Using CSS pseudo-elements, box-shadows, and transforms to create drop-shadow effects without images from semantic HTML">
  7.  
  8.      <style>
  9.          body {
  10.              padding:20px 0 30px;
  11.              font:14px/1.5 Arial, sans-serif;
  12.              text-align:center;
  13.              color:#333;
  14.              background:#FAF0D9;
  15.          }
  16.  
  17.          a {
  18.              font-weight:bold;
  19.              color:#346AA8;
  20.          }
  21.  
  22.          a:hover,
  23.          a:focus,
  24.          a:active {
  25.              text-decoration:none;
  26.          }
  27.  
  28.          .container {
  29.              position:relative;
  30.              z-index:1;
  31.              width:600px;
  32.              padding:20px;
  33.              margin:0 auto;
  34.              background:#FAF0D9;
  35.          }
  36.  
  37.          .container:after {
  38.              content:"";
  39.              display:block;
  40.              clear:both;
  41.              visibility:hidden;
  42.              height:0;
  43.              font-size:0;
  44.          }
  45.  
  46.          /* Shared styles */
  47.  
  48.          .drop-shadow {
  49.              position:relative;
  50.              float:left;
  51.              width:40%;
  52.              padding:1em;
  53.              margin:2em 10px 4em;
  54.              background:#fff;
  55.              -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  56.              -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  57.              box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  58.          }
  59.  
  60.          .drop-shadow:before,
  61.          .drop-shadow:after {
  62.              content:"";
  63.              position:absolute;
  64.              z-index:-2;
  65.          }
  66.  
  67.          .drop-shadow p {
  68.              font-size:16px;
  69.              font-weight:bold;
  70.          }
  71.  
  72.          /* Lifted corners */
  73.  
  74.          .lifted {
  75.              -moz-border-radius:4px;
  76.              border-radius:4px;
  77.          }
  78.  
  79.          .lifted:before,
  80.          .lifted:after {
  81.              bottom:15px;
  82.              left:10px;
  83.              width:50%;
  84.              height:20%;
  85.              max-width:300px;
  86.              max-height:100px;
  87.              -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  88.              -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  89.              box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  90.              -webkit-transform:rotate(-3deg);
  91.              -moz-transform:rotate(-3deg);
  92.              -ms-transform:rotate(-3deg);
  93.              -o-transform:rotate(-3deg);
  94.              transform:rotate(-3deg);
  95.          }
  96.  
  97.          .lifted:after {
  98.              right:10px;
  99.              left:auto;
  100.              -webkit-transform:rotate(3deg);
  101.              -moz-transform:rotate(3deg);
  102.              -ms-transform:rotate(3deg);
  103.              -o-transform:rotate(3deg);
  104.              transform:rotate(3deg);
  105.          }
  106.  
  107.          /* Curled corners */
  108.  
  109.          .curled {
  110.              border:1px solid #efefef;
  111.              -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
  112.              border-radius:0 0 120px 120px / 0 0 6px 6px;
  113.          }
  114.  
  115.          .curled:before,
  116.          .curled:after {
  117.              bottom:12px;
  118.              left:10px;
  119.              width:50%;
  120.              height:55%;
  121.              max-width:200px;
  122.              max-height:100px;
  123.              -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  124.              -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  125.              box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  126.              -webkit-transform:skew(-8deg) rotate(-3deg);
  127.              -moz-transform:skew(-8deg) rotate(-3deg);
  128.              -ms-transform:skew(-8deg) rotate(-3deg);
  129.              -o-transform:skew(-8deg) rotate(-3deg);
  130.              transform:skew(-8deg) rotate(-3deg);
  131.          }
  132.  
  133.          .curled:after {
  134.              right:10px;
  135.              left:auto;
  136.              -webkit-transform:skew(8deg) rotate(3deg);
  137.              -moz-transform:skew(8deg) rotate(3deg);
  138.              -ms-transform:skew(8deg) rotate(3deg);
  139.              -o-transform:skew(8deg) rotate(3deg);
  140.              transform:skew(8deg) rotate(3deg);
  141.          }
  142.  
  143.          /* Perspective */
  144.  
  145.          .perspective:before {
  146.              left:80px;
  147.              bottom:5px;
  148.              width:50%;
  149.              height:35%;
  150.              max-width:200px;
  151.              max-height:50px;
  152.              -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  153.              -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  154.              box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  155.              -webkit-transform:skew(50deg);
  156.              -moz-transform:skew(50deg);
  157.              -ms-transform:skew(50deg);
  158.              -o-transform:skew(50deg);
  159.              transform:skew(50deg);
  160.              -webkit-transform-origin:0 100%;
  161.              -moz-transform-origin:0 100%;
  162.              -ms-transform-origin:0 100%;
  163.              -o-transform-origin:0 100%;
  164.              transform-origin:0 100%;
  165.          }
  166.  
  167.          .perspective:after {
  168.              display:none;
  169.          }
  170.  
  171.          /* Raised shadow - no pseudo-elements needed */
  172.  
  173.          .raised {
  174.              -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  175.              -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  176.              box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  177.          }
  178.  
  179.          /* Curved shadows */
  180.  
  181.          .curved:before {
  182.              top:10px;
  183.              bottom:10px;
  184.              left:0;
  185.              right:50%;
  186.              -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
  187.              -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
  188.              box-shadow:0 0 15px rgba(0,0,0,0.6);
  189.              -moz-border-radius:10px / 100px;
  190.              border-radius:10px / 100px;
  191.          }
  192.  
  193.          .curved-vt-2:before {
  194.              right:0;
  195.          }
  196.  
  197.          .curved-hz-1:before {
  198.              top:50%;
  199.              bottom:0;
  200.              left:10px;
  201.              right:10px;
  202.              -moz-border-radius:100px / 10px;
  203.              border-radius:100px / 10px;
  204.          }
  205.  
  206.          .curved-hz-2:before {
  207.              top:0;
  208.              bottom:0;
  209.              left:10px;
  210.              right:10px;
  211.              -moz-border-radius:100px / 10px;
  212.              border-radius:100px / 10px;
  213.          }
  214.  
  215.          /* Rotated box */
  216.  
  217.          .rotated {
  218.              -webkit-box-shadow:none;
  219.              -moz-box-shadow:none;
  220.              box-shadow:none;
  221.              -webkit-transform:rotate(-3deg);
  222.              -moz-transform:rotate(-3deg);
  223.              -ms-transform:rotate(-3deg);
  224.              -o-transform:rotate(-3deg);
  225.              transform:rotate(-3deg);
  226.          }
  227.  
  228.          .rotated > :first-child:before {
  229.              content:"";
  230.              position:absolute;
  231.              z-index:-1;
  232.              top:0;
  233.              bottom:0;
  234.              left:0;
  235.              right:0;
  236.              background:#fff;
  237.              -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  238.              -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  239.              box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  240.          }
  241.  
  242.      </style>
  243.  
  244.  </head>
  245.  <body>
  246.      <div class="container">
  247.          <h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1>
  248.  
  249.          <div class="drop-shadow lifted">
  250.              <p>Lifted corners</p>
  251.          </div>
  252.  
  253.          <div class="drop-shadow curled">
  254.              <p>Curled corners</p>
  255.          </div>
  256.  
  257.          <div class="drop-shadow perspective">
  258.              <p>Perspective</p>
  259.          </div>
  260.  
  261.          <div class="drop-shadow raised">
  262.              <p>Raised box</p>
  263.          </div>
  264.  
  265.          <div class="drop-shadow curved curved-vt-1">
  266.              <p>Single vertical curve</p>
  267.          </div>
  268.  
  269.          <div class="drop-shadow curved curved-vt-2">
  270.              <p>Vertical curves</p>
  271.          </div>
  272.  
  273.          <div class="drop-shadow curved curved-hz-1">
  274.              <p>Single horizontal curve</p>
  275.          </div>
  276.  
  277.          <div class="drop-shadow curved curved-hz-2">
  278.              <p>Horizontal curves</p>
  279.          </div>
  280.  
  281.          <div class="drop-shadow lifted rotated">
  282.              <p>Rotated box</p>
  283.          </div>
  284.      </div>
  285.  </body>
  286.  </html>

对应效果图如下：

css3 drop-shaow阴影效果的更多相关文章

  1. CSS3 之书页阴影效果

    视觉如下: CSS3 之书页阴影效果: <html> <head> <meta charset="UTF-8"> <title>书页 ...

  2. CSS3 -web-box-shadow实现阴影效果

    -webkit-box-shadow:2px -2px 10px #06c; 给元素添加阴影效果 text-shadow 是给文本添加阴影效果属性同上 形成的阴影跟阴影本体大小一致,四个属性分别代表 ...

  3. CSS3 box-shadow 内外阴影效果

    说明 box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果.定义多个阴影,使用逗号分隔. 语法 box-shadow: none | [inset? && [<o ...

  4. 一个CSS3滤镜Drop-shadow阴影效果

    <html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/cs ...

  5. 用CSS3实现带有阴影效果和颜色渐变的按钮

    这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片:本想直接在这个页面下嵌html的,,试了后发现有些cs ...

  6. 转：前端集锦：十款精心挑选的在线 CSS3 代码生成工具

    今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效.CSS3 是对 CSS 规范的改善和增强,增加了圆角.旋转.阴影.渐变和动画等众多强大的 ...

  7. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  8. css3工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  9. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  10. 12款有助于简化CSS3开发的工具

    网站开发者能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进.现在,本文将介绍12款有助于简化CSS3开发的工具.  1.CSS3 Pie: 允许在IE上使用CSS3绝大部 ...

随机推荐

  1. 详解JOIN

    根据连接中使用的操作符不同,连接条件可分为:等连接,不等连接   连接本身分为: 内连接(INNER JOIN) (1)INNER JOIN 方式(INNER可以省略) 取两表的交集. (2)并表查询 ...

  2. iOS设计模式解析（二）抽象工厂方法

    抽象工厂方法:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类 与工厂方法区别: 抽象工厂通过对象组合创建抽象产品.工厂通过类集成创建抽象产品 抽象工厂创建多系列产品.工厂创建一种产 ...

  3. win10系统安装 VS 2015 安装包下载

    这个VS2015安装包 我找了好久才找到  能在WIN 10系统下安装 下面分享链接地址给大家: http://www.ithome.com/html/win10/215213.htm

  4. [Linked List]Remove Linked List Elements

    Total Accepted: 43183 Total Submissions: 160460 Difficulty: Easy Remove all elements from a linked l ...

  5. 【11.2noip冲刺赛】 循环整数 （分段打表）

    [问题描述]moreD在学习完循环小数之后发现循环是个很美好的性质.自己只需要记住短短的循环节以及循环次数(次数大于1,且是整数)就可以记住整个数字了.因为背诵数字变得方便了,moreD决定背诵[L, ...

  6. 搜索+剪枝——运筹帷幄 (road.cpp)

    运筹帷幄 (road.cpp) [题目描述] 刘邦军行至迷糊林,见其中瘴气围绕,又有青狼猛虎之兽,难于前行. 已知迷糊林是一个共有n个结点的图,点与点之间共有m条道路相连接,每条路有参数t,c,分别表 ...

  7. Hibernate学习之注解学习

    转自:http://blog.sina.com.cn/s/blog_935ebb670101dnre.html 1.类级别注解 @Entity   映射实体类 @Table    映射数句库表 @En ...

  8. LPC基础教程-Lpc程序和编程环境 mudos 加载原理

    编程环境 通常我们所见到的Mud大多是LpMud.LpMuds使用Unix的指令和文件结构.如果你对Unix有所了解,那么LpMud中的一些指令和它的文件结构与普通的Unix基本一样.如果你从未使用过 ...

  9. SQL Server 从数据库快照还原数据库

    语法: restore database db_name from database_snapshot  = 'db_snapshot_name'; ------------------------- ...

  10. 关于异常Microsoft.CSharp.RuntimeBinder.RuntimeBinderException

    原文:关于异常Microsoft.CSharp.RuntimeBinder.RuntimeBinderException 关于Microsoft.CSharp.RuntimeBinder.Runtim ...