效果图

代码

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. CI reids 缓存

    注意:在项目中的application/libraries 中自己定义的类最好不要以cache命名. 连接 Redis 服务器的配置信息必须保存到 application/config/redis.p ...

  2. HttpRuntime.Cache 失效

    最近做一个报纸内容类网站,为了提高响应速度,将首页各栏目以及二级栏目中Part文献列表存储在HttpRuntime.Cache缓存中,发布后发现问题,刚插入的缓存很快就失效,本机调试没有问题. 由于H ...

  3. 收集计算机分区信息，去除列中的重复值（Excel）（空行）

    收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...

  4. linux下的块设备驱动（一）

    块设备的驱动比字符设备的难,这是因为块设备的驱动和内核的联系进一步增大,但是同时块设备的访问的几个基本结构和字符还是有相似之处的. 有一句话必须记住:对于存储设备(硬盘~~带有机械的操作)而言,调整读 ...

  5. C# 多线程处理相关说明: WaitHandle,waitCallback, ThreadPool.QueueUserWorkItem

    class TestThread { static void Main() { //使用WaitHandle静态方法阻止一个线程,直到一个或多个同步对象接收到信号 WaitHandle[] waitH ...

  6. Codeforces Round #311 (Div. 2) A. Ilya and Diplomas 水题

    A. Ilya and Diplomas Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/ ...

  7. Codeforces Round #308 (Div. 2)B. Vanya and Books 数学

    B. Vanya and Books Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/552/pr ...

  8. Android——ViewGroup的一个用法实例(转载)

    找了很久,终于找到了. <?xml version="1.0" encoding="UTF-8" ?> <merge xmlns:androi ...

  9. Perl小知识点之排序sort

    脚本这种东西,就是要常用,否则一段时间不用就生疏了,因此决定时时记一些小知识点,一来回顾一下,二来需要的时候可以迅速获得提示. Sort by number You could now write a ...

  10. # 36氪开放日 • 杭州 • 11月10日 # 谈谈参会感受

           今天下午,第一次去参加了36氪的开放日,虽然站着听有点累,但是也很值得.会上很多创业者都分享和展示了他们的产品,一方面自己了解了一些产品人的故事,另一方面也对如何做产品有了新的认识.参会 ...