【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及其更新版本.下面分别介绍两种 ...
随机推荐
- 局部化原理(Laplace渐进估计方法)
设$f(x)$于$[0,1]$上严格单调递减,且$f(0)=1,f(1)=0$,证明: $$\int_{0}^{1}f^{n}(x)dx \sim \int_{0}^{\delta}f^{n}(x), ...
- JS 去字符串空格
str为要去除空格的字符串:去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/g ...
- 理解Web标准(网站标准)
我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...
- ARM&Linux 下驱动开发第二节
驱动文件:qudong.c,make生成qudong.ko文件,烧录到ARM板上 #include<linux/init.h> #include<linux/module.h> ...
- registerClassAlias()函数和getClassByAlias()函数
flash.net 包中包含包级函数,可用于打开新的浏览器窗口,向服务器发送 URL 请求以及处理类别名. registerClassAlias()函数 public function registe ...
- 使用adns库解析域名
1. adns.adns-python库简介 adns库是一个可进行异步非阻塞解析域名的库,主要使用C语言编写,在linux平台下运行.使用adns库进行域名解析效率非常,著名的开源网络爬虫larbi ...
- Java编程规范实践
一个好的编程规范可以让代码易于理解,具体的操作却不必如此麻烦. 本文包含以下内容: Eclipse Java代码Formatter配置 Eclipse 代码模板配置 自动添加Javadoc注释 附录: ...
- printf打印
printf 打印变量(整型,浮点型,双精度型,字符型,字符串类型) 整型: printf("%d",a); 打印出整形变量a 浮点型:printf("%f", ...
- 深刻理解Java中final的作用(一):从final的作用剖析String被设计成不可变类的深层原因
声明:本博客为原创博客,未经同意,不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(原文链接为http://blog.csdn.net/bettarwang/article/det ...
- EJB究竟是什么,真的那么神奇吗??
1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...