一个CSS3滤镜Drop-shadow阴影效果
<html>
<head>
<title>CSS3 Drop-shadow阴影</title>
<style type="text/css">
.drop-shadow {
width: 500px;
height: 300px;
position: relative;
background: #ccc;
}
.drop-shadow:before,
.drop-shadow:after {
content: "";
position: absolute;
z-index: -;
bottom: 15px;
width: %;
height: %;
/*add box-shadow*/
-webkit-box-shadow: 15px 10px rgba(,,,0.8);
-moz-box-shadow: 15px 10px rgba(,,,0.8);
box-shadow: 15px 10px rgba(,,,0.8);
}
.drop-shadow:before{
left:5px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.drop-shadow:after {
right:5px;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
</style>
</head>
<body>
<div class="drop-shadow">sadsadasd</div>
</body>
</html>
一个CSS3滤镜Drop-shadow阴影效果的更多相关文章
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- CSS3 滤镜学习
html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合 ...
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- CSS3滤镜(filter--CSS3技术
filter 属性定义了元素(通常是<img>)的可视效果,例如图片的模糊.饱和度.灰度等……个人感觉功能很强大 1.filter的语法 filter: none | blur() | b ...
- Filter Effects - 使用 CSS3 滤镜处理图片
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- 【CSS3】CSS3 滤镜实现
作者:^_^肥仔John 来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
随机推荐
- iOS开发 - 用AFNetworking实现https单向验证,双向验证
https相关 自苹果宣布2017年1月1日开始强制使用https以来,htpps慢慢成为大家讨论的对象之一,不是说此前https没有出现,只是这一决策让得开发者始料未及,博主在15年的时候就做过ht ...
- Leetcode 二分查找 Search Insert Position
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie Search Insert Position Total Accepted: 14279 T ...
- 不能与abstruct共同修饰方法的关键字
一 抽象类:动态方法至少有一个是抽象方法. 其中abstruct关键字修饰的方法不能与哪些关键字共同修饰? 1private 因为private修饰的方法在子类中是隐藏的.不可见的.而abstruct ...
- python新手中常见疑惑及解答
1 lambda函数 函数格式是lambda keys:express 匿名函数lambda是一个表达式函数,接受keys参数,返回表达式的值.所以不用return,也没有函数名,经常用在需要ke ...
- Linux服务器开发初步
服务器开发需要考虑的内容很多,比如服务器的架构.稳定性.性能以及负载能力等等. 事实上,在开发服务器的过程中,需要综合考虑各种因素,比如就客户端连接时间较短却又比较频繁的服务器(例如HTTP服务器 ...
- android studio - 解决Android Studio不停的Indexing的问题
File > Invalidate Caches/Restart
- mac下framework联编需要设置的
点击target,然后,在Build Phases里的空白处用鼠标点一下(艹 变态) 这时,点最上面菜单:Editor/Add Build Phases/Add Copy Files Build Ph ...
- HBase性能优化方法总结(三):读表操作
本文主要是从HBase应用程序设计与开发的角度,总结几种常用的性能优化方法.有关HBase系统配置级别的优化,可参考:淘宝Ken Wu同学的博客. 下面是本文总结的第三部分内容:读表操作相关的优化方法 ...
- spark-streaming问题集锦
报错: // :: ERROR Utils: Exception encountered py4j.Py4JException: Cannot obtain a new communication c ...
- css3实现立方体效果
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>&l ...