学习来源:慕课网http://www.imooc.com/view/240

先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

HTML结构

 <body>

     <div class="wrap effect">

     <!-- effect类:是阴影类,其他元素也可以使用 -->

         <h1>Shadow Effect</h1>

     </div>

     <ul class="box">

         <li><img src="data:images/photo1.jpg" alt=""></li>

         <li><img src="data:images/photo2.jpg" alt=""></li>

         <li><img src="data:images/photo3.jpg" alt=""></li>

     </ul>

 </body>

CSS样式(省略了各浏览器前缀)

 /*通用类*/

 body { font-family: Arial; font-size: 20px;}

 body,ul {margin:; padding:; list-style: none;}

 .wrap {width:70%; height:200px; margin:50px auto; background: #fff; }

 .wrap h1 {font-size: 20px; text-align: center; line-height: 200px; }

 /*弧度阴影*/

 .effect {

     position: relative;

     box-shadow: 0px 1px 4px rgba(0,0,0,0.3),

     0 0 10px rgba(0,0,0,0.1) inset;

     /*添加一个范围=4px的小阴影;再添加一个范围=10px的内阴影;*/

 }

 .effect:before,.effect:after {

     content: '';

     background: #f00;

     position: absolute;

     z-index: -2;

     top:50%; bottom:; left:30px; right:30px;

     /*设置四个方向值,然后浏览器自动计算盒子的大小;*/

     box-shadow: 0px 0px 20px rgba(0,0,0,0.8);

     /*设置添加的盒子的阴影;*/

     border-radius: 100px/10px;

     /*添加圆角:水平方向圆角大小是100px/垂直方向圆角大小是10px;*/

 }

 /*翘边阴影*/

 .box{

     width:980px;

     height:auto;

     clear:both;

     overflow:hidden;

     margin:20px auto;

 }

 .box li{

     position: relative;

     /*以li为定位基准;*/

     width:300px;

     height:210px;

     float:left;

     background: #fff;

     margin:20px 10px;

     border:2px solid #efefef;

     box-shadow: 0px 1px 4px rgba(0,0,0,0.27);

     /*给li添加一个小小的阴影;*/

 }

 .box li img {

     display: block;

     width:290px;

     height:200px;

     margin:5px;

 }

 .box li:before{

     content: '';

     position: absolute;

     z-index: -3;

     width:90%;

     height:80%;

     left:18px;

     bottom:8px;

     box-shadow: 0px 8px 20px rgba(0,0,0,0.6);

     transform:skew(-12deg) rotate(-4deg);

     /*图形向右倾斜12度;并逆时针旋转4度;*/

 }

 .box li:after{

     content: '';

     position: absolute;

     z-index: -4;

     width:90%;

     height:80%;

     right:18px;

     bottom:8px;

     box-shadow: 0px 8px 20px rgba(0,0,0,0.6);

     transform:skew(12deg) rotate(4deg);

     /*图形向左倾斜12度;并顺时针旋转4度;*/

 }

之前在PS里用灰色图层叠加在其他图层下面做特殊阴影效果，相同思路应用到CSS里了。赞！

知识点补充↓↓↓↓↓↓↓

 1.box-shadow--添加一个或多个阴影

     >1.功能:box-shadow--添加一个或多个阴影;

     >2.语法:box-shadow:h-shadow v-shadow blur spread color inset;

     >3.参数:

         >>:h-shadow(必需):水平阴影的位置;允许负值;

         >>:v-shadow(必需):垂直阴影的位置;允许负值;

         >>:blur(可选):模糊距离;

         >>:spread(可选):阴影的尺寸;

         >>:color(可选):阴影的颜色;

         >>:inset(可选):将外部阴影(outset)改为内部阴影;

     >4.浏览器:IE9+/FF4

 2.:before与:after

     >1.:before选择器:在被选元素的内容前面插入内容;

     >2.:after选择器:在被选元素的内容后面插入内容;

     >3.说明:需要使用content属性来指定要插入的内容;

     >4.浏览器:IE8及更早版本中的:after,必须使用<!DOCTYPE>;

 3.transform--

     >1.功能:向元素应用2D或3D转换

     >1.语法:transform:none | transform-functions

     >2.参数:

         >>:skew(x-angle,y-angle):定义沿着X和Y轴的2D倾斜转换;

         >>:skewX(angle):定义沿着X轴的2D倾斜转换;

         >>:skewY(angle):定义沿着Y轴的2D倾斜转换;

CSS3--实现特殊阴影 (实例)的更多相关文章

  1. CSS3知识之阴影box-shadow

    一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow   ...

  2. css3照片墙+曲线阴影

    css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...

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

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

  4. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  5. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  6. CSS3实现带阴影的弹球

    实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  8. Css3阴影实例

    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...

  9. CSS3的文字阴影—text-shadow

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...

  10. IE6下完美兼容css3圆角和阴影属性的htc插件PIE.htc

    1.(推荐:)css插件PIE.htc,这个才是真正完美兼容css3的圆角和阴影属性在IE6环境下使用的效果,但要注意的是:下面的代码必须写在html文件的head标签内,否则无效(不能从外部引用下面 ...

随机推荐

  1. GIT 中提示 please tell me who you are

    如果使用git过程中出现了,please tell me who you are ,需要设置一下使用者的身份. 1.git config user.name "username" ...

  2. Builder

    Builder模式的使用情景 相同的方法, 不同的执行顺序, 产生不同的事件结果 多个部件或零件, 都可以装配到一个对象中, 但是产生的运行结果又不相同 产品类比较复杂, 或者产品类中的调用顺序不同产 ...

  3. nodejs以及npm的安装

    参考资料:http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ 上面的仁兄说的比较清楚,基本解决了安装中遇到的问题 ...

  4. apache2 添加perl支持

    官方文档,很详细了. https://httpd.apache.org/docs/2.0/howto/cgi.html#configuring   我修改了/etc/apache2/sites-ava ...

  5. U8记账凭证修改方法汇总

    在输入记账凭证时,尽管账务系统提供了多种控制错误的措施,但错误凭证的出现是难免的,为此,系统必须能够提供对错误凭证修改的功能.目前,许多财 务软件(如:用友.安易.三门)都提供了“反审核.反记账.反结 ...

  6. CloudStack的VO在调用setRemoved方法抛异常的原因

    今天在开发中发现一个问题,本来想对一个VO对象的removed值赋值,然后去update一下这条记录,一个最简单的set方法,但是在调用时直接抛异常了. 1: public void setRemov ...

  7. 使用命令行工具将Android应用转换成BlackBerry PlayBook应用

    昨天写了篇文章关于Android应用转换的,通过BlackBerry的在线转换工具将Android应用转换成BlackBerry PlayBook应用.有网友反映说方法有点麻烦,所以今天补上新的转换方 ...

  8. cocos2d win7 安卓环境配置开发

    相关工具 下载 Android SDK 下载和安装 Android NDK版本不要选r9的.用r8e!r9会报错 下载安装JDK版本是 jdk-7u13-windows-x64.exe 下载和安装Cy ...

  9. Android开发目录

    1.ADT下载地址整理 2.之前的Android项目报错,新建Android项目报错,代码中找不到错误解决方案 3.错误“Unexpected namespace prefix "xmlns ...

  10. 简约之美Jodd-http--应用一箩筐

    Jodd-http是一个微型的.简约的http client,然而简单而且方便.使用它可以轻松的实现发送请求和读取响应.它的目标就是日常应用变的非常简单,从而简化开发人员的工作. 了解Jodd-htt ...