不用图片而用css3实现一些阴影特效
一些阴影效果用图片实现也许是以前我们常用的一种方法，不过现在用css3一些属性也可以实现阴影效果，今天做了一个例子；
html代码如下：
<div class="container">
<h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1>
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
<div class="drop-shadow curled">
<p>Curled corners</p>
</div>
<div class="drop-shadow perspective">
<p>Perspective</p>
</div>
<div class="drop-shadow raised">
<p>Raised box</p>
</div>
<div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div>
<div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div>
<div class="drop-shadow curved curved-hz-1">
<p>Single horizontal curve</p>
</div>
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
<div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>
css样式如下：
body {
padding:20px 0 30px;
font:14px/1.5 Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
background:#FAF0D9;
}
a {
font-weight:bold;
color:#346aa8;
}
a:hover, a:focus, a:active {
text-decoration:none;
}
.container {
position:relative;
z-index:1;
width:600px;
padding:20px;
margin:0 auto;
background:#FAF0D9;
}
.container:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
font-size:0;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
box-shadow:0 1px 4px rgba(0 ,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before, .lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0 ,0 ,0,0.7);
box-shadow:0 15px 10px rgba(0 ,0 ,0,0.7);
-moz-box-shadow:0 15px 10px rgba(0 ,0, 0,0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
}
.curled {
border:1px solid #efefef;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
-webkit-border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.curled:before, .curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0,0,0,0.5);
-moz-box-shadow:0 8px 12px rgba(0,0,0,0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}
.curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
.perspective:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
max-height:50px;
-webkit-box-shadow:-80px 0 8px rgba(0,0,0,0.4);
box-shadow:-80px 0 8px rgba(0,0,0,0.4);
-moz-box-shadow:-80px 0 8px rgba(0,0,0,0.4);
-webkit-transform:skew(50deg);
-moz-transform:skew(50deg);
-o-transform:skew(50deg);
-ms-transform:skew(50deg);
transform:skew(50deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin: 0 100%;
transform-origin:0 100%;
}
.perspective:after {
display:none;
}
.raised {
-webkit-box-shadow:0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0 ,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
box-shadow:0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0 ,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
-webkit-box-shadow:0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0 ,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
.curved:before {
top:10px;
bottom:10px;
left:0;
right:50%;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.curved-vt-2:before {
right:0;
}
.curved-hz-1:before {
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
}
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
支持的浏览器主要有：Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+
预览效果如下图：
不用图片而用css3实现一些阴影特效相关推荐
- CSS3设计网页阴影特效艺术字
1. 前言 利用CSS3新增的text-shadow属性可以生成文本阴影,在HTML文档中实现火焰特效.发光特效.凸起和镶嵌特效.描边特效的艺术字效果,大大提高开发效率,无需链接图片文件,节约带宽. ...
- php 图片圆角透明,CSS_使用CSS3实现圆角,阴影,透明，CSS实现圆角,阴影,透明的方法 - phpStudy...
使用CSS3实现圆角,阴影,透明 CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆 ...
- html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
- css3-pie,PIE使IE支持CSS3圆角盒阴影与渐变渲染
一.PIE之简述 在国外,CSS3的盛行与普及,探讨与研究要比国内领先不知多少个身位.相比之下,国内似乎如一潭死水,为何?我觉得国内领先的前端团队应该通过自身的影响力,带动国内整个前端领域与时俱进.然 ...
- html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果
某些时候你可能需要让图片四周带有边缘模糊效果,那么除了PS之外有没有简单的代码实现方法呢?今天我们就使用CSS3的新特性实现图片边缘的模糊效果,首先你需要在图片标签外部套一层DIV标签,其次再为外层D ...
- 图片阴影html,js图片彩色阴影特效插件
image-shadow.js是一款用于制作图片彩色阴影特效的js插件.它通过CSS3 filter过滤器来生成图片对应颜色的阴影效果. 注意,IE浏览器和Edge浏览器不支持该图片彩色阴影特效. 使 ...
- CSS3 box-shadow图层阴影
上一节我们一起探讨了一下CSS3的文字阴影text-shadow的使用方法,今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法.CSS3的box-shadow有点类似于te ...
- CSS3的文字阴影—text-shadow
前段时间整理了CSS3中的渐变Gradient.透明度RGBA.边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法.今天特意花了点时间贴 ...
- 不用图片的DIV圆角（兼容各浏览器）
分享一个大家在工作中很实用的一个不用图片就能实现的DIV圆角.希望对大家开发有用: 直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <st ...
最新文章
- css中的display属性之li元素
- 数人云CEO王璞：容器正成为软件交付的标准
- python对英语的要求_学python需要英语基础吗
- linux 背光驱动程序,Linux驱动工程师成长之路 LCD背光控制RT9379B
- 双时隙的工作原理_提高频点利用 海能达双时隙功能效率高
- python __enter____exit__(with)
- 《Flutter 从0到1构建大前端应用》读后感—第8章【持久化】
- 爬虫（七）：爬取猫眼电影top100
- 探秘Runtime - Runtime介绍
- 零基础学习Java的路线，学完上岸BAT!
- 复杂系统建模计算机仿真是干嘛的,复杂系统建模和 与仿真.ppt
- java注册功能实现
- 川外计算机课什么时候截止,四川外国语大学留学生学习期限及课程设置
- 智慧环卫管理系统方案
- kindle 安卓 app下载的电子书放在什么文件夹？
- html中calc属性什么意思,深入理解CSS calc属性
- 在网页中快速集成自己的即时通聊天，实现类是淘宝旺旺的在线洽谈效果。
- 计算机del键作用,计算机里的英文字母“DEL”键是干什么用的
- C语言 输出菱形 最短代码！
- CRMEB4.x版和pro版客服配置详解