效果图

代码

index

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>box-shadow</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="wrap effect">
     <h3>Shadow Effect</h3>
  </div>
  <ul class="box">
      <li><img src="data:images/photo1.jpg"/></li>
      <li><img src="data:images/photo2.jpg"/></li>
      <li><img src="data:images/photo3.jpg"/></li>
  </ul>
</body>
</html>

css

body{
    font-family: Arial;
    font-size: 24px;
}
/*位置样式*/
.wrap h3{
    text-align: center;
    position: relative;
    top:100px;
}
.wrap{
    width: 50%;
    height: 300px;
    background: #FFF;
    margin:20px auto;
}
/*阴影样式 box-shadow: h-shadow v-shadow blur spread color inset;*/
/*边框阴影*/
.effect{
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;
}
/*下边的曲线阴影*/
.effect:before,.effect:after{
    content:"";
    position: absolute;
    z-index: -1;
    left: 6px;
    right:6px;
    bottom:;
    top:95%;
    background: red;
    border-radius: 100px / 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/*照片*/
.box{
    width: 980px;
    height: auto;
    margin:20px auto;
    padding:;
    clear: both;
    overflow: hidden;
}
.box li img {
    width: 290px;
    height: 210px;
    padding: 5px;
}
ul.box li{
    background: #fff;
    list-style: none;
    width: 300px;
    height: 220px;
    margin:20px 10px;
    line-height: 220px;
    border: 2px solid #efefef;
    position: relative;
    float: left;
    padding:;
    text-align: center;
}

/*照片阴影*/
ul.box li:before{
    content:"";
    position: absolute;
    z-index: -1;
    width: 85%;
    height: 80%;
    left: 20px;
    bottom: 5px;
    background: red;
    transform: skew(14deg) rotate(3deg) ;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
ul.box li:after{
    content:"";
    position: absolute;
    z-index: -1;
    width: 85%;
    height: 80%;
    right: 20px;
    bottom: 5px;
    background: red;
    transform: skew(-14deg) rotate(-3deg) ;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

【CSS3】---曲线阴影翘边阴影的更多相关文章

  1. CSS3实现图形曲线阴形和翘边阴影

    首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...

  2. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  3. css3 曲线阴影，翘边阴影

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于C3翘边阴影的demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  6. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. css3圆角矩形、盒子阴影

    css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...

  9. CSS3 --添加阴影（盒子阴影、文本阴影的使用）

     CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

随机推荐

  1. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  2. iOS开发-关于网络状态的判断

    在判断网络状态这个问题上,苹果提供了一个叫Reachability的第三方库,但是这个库并不能真正的检测我们的网络状态,我也是在调试程序的时候发现的.详情可以阅读这个博客http://blog.csd ...

  3. (字符串的处理4.7.16)POJ 1159 Palindrome(让一个字符串变成回文串需要插入多少个字符...先逆序,在减去公共子序列的最大长度即可)

    /* * POJ_1159.cpp * * Created on: 2013年10月29日 * Author: Administrator */ #include <iostream> # ...

  4. 读《架构探险——从零开始写Java Web框架》

    内容提要 <架构探险--从零开始写Java Web框架>首先从一个简单的 Web 应用开始,让读者学会如何使用 IDEA.Maven.Git 等开发工具搭建 Java Web 应用:接着通 ...

  5. Linux makefile 教程 很具体，且易懂

    近期在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了下面这篇文章.通俗易懂.然后把它贴出 ...

  6. HTML5本地存储 localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  7. C++中String类的实现

    原文:http://noalgo.info/382.html String是C++中的重要类型,程序员在C++面试中经常会遇到关于String的细节问题,甚至要求当场实现这个类.只是由于时间关系,可能 ...

  8. mysql官方示例数据库

    employees数据库:http://ari.iteye.com/blog/1066690  https://launchpad.net/test-db/employees-db-1/1.0.6

  9. Linux根文件系统的制作

    转载:http://www.cnblogs.com/hnrainll/archive/2011/06/09/2076655.html 1. 根文件系统 文件系统是包括在一个磁盘(包括光盘.软盘.闪盘及 ...

  10. java 数组初始化

    一维数组 1)   int[] a;   //声明,没有初始化 2)   int[] a=new int[5];   //初始化为默认值,int型为0 3)   int[] a={1,2,3,4,5} ...