首先,来看看完成之后的效果图:


实现原理

①曲线阴影实现:

多个阴影重叠,就是正常阴影+曲线阴影

正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩形的下面,并露出一点点底部有弧度的阴影,这样的话就可以形成曲线投影的效果。例如下面这个样子:


主要代码:

html部分:

<div class="effect">

</div>

css部分:

/*曲线阴影*/

.effect{

position: relative;

width:500px;

height:200px;

margin: 0 auto;

box-shadow:0 1px 10px rgba(0,120,215,0.7);

-webkit-box-shadow:0 1px 10px rgba(0,120,215,0.7);

-moz-box-shadow:0 1px 10px rgba(0,120,215,0.7);

-o-box-shadow:0 1px 10px rgba(0,120,215,0.7);

}

/*巧用:after和:before,加上绝对定位的特点,形成一个圆角矩形*/

.effect:after,.effect:before{

position: absolute;

content: "";

z-index:-1;

top:50%;

bottom:0;

left:10px;

right:10px;

box-shadow:0 0 20px rgba(0,120,215,0.9);

-webkit-box-shadow:0 0 20px rgba(0,120,215,0.9);

-moz-box-shadow:0 0 20px rgba(0,120,215,0.9);

-o-box-shadow:0 0 20px rgba(0,120,215,0.9);

border-radius: 100px/10px;

-webkit-border-radius: 100px/10px;

-moz-border-radius: 100px/10px;

-o-border-radius: 100px/10px;

/*border-radius:100px/10px,表示的是,水平方向的半径是100px,垂直方向是10px。*/

}

②翘边阴影

原理:利用:before和:after,加上绝对定位的性质,可以形成一个矩形,这个时候结合CSS3的倾斜属性skew和旋转属性rote。就可以形成一个有旋转角度的平行四边形,这个时候再和原来的矩形重叠,则可产生翘边效果。

原理图:


主要代码:

html部分:

<ul class="wrap">

<li><img src="img/12.jpg"></li>

<li><img src="img/21.jpg"></li>

</ul>

css部分:

/*翘边阴影*/

.wrap li{

position: relative;

width:350px;

height:250px;

padding:10px;

background: #fff;

border:solid 1px #ccc;

box-shadow: 0 0 15px rgba(0,0,0,0.2);

-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);

-moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);

-o-box-shadow: 0 0 15px rgba(0,0,0,0.2);

}

.wrap li img{

width:350px;

height:250px;

}

.wrap li:before{

position: absolute;

content: "";

z-index: -2;

width:325px;

height:220px;

left:22px;

bottom:13px;

background: transparent;

box-shadow: 0 5px 30px rgba(0,0,0,1);

-webkit-box-shadow: 0 5px 30px rgba(0,0,0,1);

-moz-box-shadow: 0 5px 30px rgba(0,0,0,1);

-o-box-shadow: 0 5px 30px rgba(0,0,0,1);

transform:skew(-15deg) rotate(-5deg);

-webkit-transform:skew(-15deg) rotate(-5deg);

-moz-transform:skew(-15deg) rotate(-5deg);

-o-transform:skew(-15deg) rotate(-5deg);

}

.wrap li:after{

position: absolute;

content: "";

z-index: -2;

width:325px;

height:220px;

left:22px;

bottom:13px;

-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.9);

-moz-box-shadow: 0 5px 30px rgba(0,0,0,0.9);

-o-box-shadow: 0 5px 30px rgba(0,0,0,0.9);

box-shadow: 0 5px 30px rgba(0,0,0,0.9);

-moz-transform:skew(15deg) rotate(5deg);

-o-transform:skew(15deg) rotate(5deg);

-webkit-transform:skew(15deg) rotate(5deg);

transform:skew(15deg) rotate(5deg);

}

完整代码已分享到:

http://git.oschina.net/LuckyWinty/CSS3Shadow

更多CSS3实现的动画效果demo,参考http://git.oschina.net/LuckyWinty/CSS3demo/tree/master/

欢迎关注我的个人微信订阅号:前端生活

转载请注明出处!

CSS3实现图形曲线阴形和翘边阴影的更多相关文章

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

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

  2. css3 曲线阴影,翘边阴影

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

  3. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  4. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  5. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  6. CSS3特殊图形制作

    CSS3特殊图形制作 现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了.废话不多说,现在开始用CSS3画图 1.心型 //HTML < ...

  7. 关于C3翘边阴影的demo

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

  8. 【CSS3】---曲线阴影翘边阴影

    效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...

  9. CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

随机推荐

  1. Python之路【第四篇】python基础 之基本数据类型之集合

    基本数据类型之集合 set set集合,是一个无序且不重复的元素集合 # set 不允许重复的集合 set允许重复的列表但是集合是无序的 #例如 # s = {1,23,23,4,55,55} # p ...

  2. pythonchallenge 解谜 Level 6

    第六关地址 http://www.pythonchallenge.com/pc/def/channel.html 和前几关一样,首先看网页源码吧.反正不看也没办法... <html>< ...

  3. 转载一些Android性能优化建议

    首先给出原文链接,感谢大神的经验分享:http://www.jointforce.com/jfperiodical/article/3553?utm_source=tuicool&utm_me ...

  4. centos 格式化分区

    #格式化U盘,成fat32 fdisk -l #获取U盘设备信息 #Disk /dev/sdc: 16.0 GB, 16025387008 bytes, 31299584 sectors#Units ...

  5. Windows系统上的.Net版本和.NETFramework的C#版本

    前言 注:本文内容摘自维基百科,用于在墙内时当作笔记看. WinForm 需要.Net最低版本 2.0 WPF需要的.Net最低版本 3.0 (Win7及之上版本自带) C#版本 版本 语言规格 日期 ...

  6. 【腾讯Bugly干货分享】美团大众点评 Hybrid 化建设

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/rNGD6SotKoO8frmxIU8-xw 本期 T ...

  7. 论如何在手机端web前端实现自定义原生控件的样式

    手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式.首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样: android: ios ...

  8. 排列组合算法的javascript实现

    命题:从成员数为N的集合S中,选出M个元素,分别求其排列与组合结果集,即 A(N, M)与C(N, M) js解法: function queue(arr, size){ if(size > a ...

  9. 辛巴学院-Unity-剑英的c#提高篇(一)主循环

    这是测试版 辛巴学院:正大光明的不务正业. 最近刚刚离开了我服务了三年多的公司,因为一个无数次碰到的老问题,没钱了. 之前不知道做什么好的时候,机缘巧合之下和哒嗒网络的吴总聊了一下,发现了vr gam ...

  10. Objective-C 原型模式 -- 简单介绍和使用

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. Prototype原型模式是一种创建型设计模式,Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建 ...