【CSS3】---曲线阴影翘边阴影
效果图
代码
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】---曲线阴影翘边阴影的更多相关文章
- CSS3实现图形曲线阴形和翘边阴影
首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- css3 曲线阴影,翘边阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于C3翘边阴影的demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3+HTML5实现块阴影与文字阴影
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
随机推荐
- Myeclipse如何整合tomcat
.在本机上安装MyEclipse和Tomcat 5软件程序 2.运行MyEclipse,设置与Tomcat 5服务器的连接,如下图所示: 选择Window--->Preferences,点击进入 ...
- CircleWaveProgressBar
https://github.com/eltld/CircleWaveProgressBar
- Gridview中绑定DropDownList
1.页面代码 <asp:TemplateField HeaderText="等级"> ...
- TP复习17
三大自动,自动创建,自动验证,自动完成
- MySql服务器的启动和关闭
转自:http://zqding.iteye.com/blog/1562095 在windows下: 启动: .cd c:\mysql\bin .mysqld --console 关闭: .cd c: ...
- linux文档编辑
编辑某个文档: 可以直接编辑的如你有文档aa,可以用vi aa [注意:必须在AA所在的目录下]: 如果没有文档而且你又想编辑就可以直接编辑vi aa[名字你可以随便命名]; 也可以先建立一个文档to ...
- Properties 转换成Map
转自:http://feitianbenyue.iteye.com/blog/1759259 对于Properties 转换成Map 的问题: 第一时间想到的肯定有以下: 1. 迭代出来 再 pu ...
- 深入了解android平台的jni(二)
Android.mk是Android提供的一种makefile文件,用来指定诸如编译生成so库名.引用的头文件目录.需要编译的.c/.cpp文件和.a静态库文件等.要掌握jni,就必须熟练掌握Andr ...
- Java虚拟机工作原理具体解释
一.类载入器 首先来看一下java程序的运行过程. 从这个框图非常easy大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘其中.然后你在命令行中输入 javac YourClass ...
- birt 批改导出的文件名【转】
birt 修改导出的文件名 birt 修改导出的文件名分两种实现方法, 第一种:修改 web.xml 中 配置的 BIRT_FILENAME_GENERATOR_CLASS <!-- Filen ...