<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阴影效果的更多相关文章

  1. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  2. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  3. CSS3 滤镜学习

    html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合 ...

  4. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  5. CSS3滤镜(filter--CSS3技术

    filter 属性定义了元素(通常是<img>)的可视效果,例如图片的模糊.饱和度.灰度等……个人感觉功能很强大 1.filter的语法 filter: none | blur() | b ...

  6. Filter Effects - 使用 CSS3 滤镜处理图片

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...

  7. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  8. 【CSS3】CSS3 滤镜实现

    作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...

  9. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

随机推荐

  1. iOS - Contacts 通讯录

    Contacts 通讯录 1.访问通讯录 设置系统访问通讯录权限 1.1 iOS 9.0 及 iOS 9.0 之后获取通讯录的方法 iOS 9.0 及 iOS 9.0 之后获取通讯录的方法 // 包含 ...

  2. 什么是FSK制式?什么是DTMF制式？

    目前国内来电显示制式有FSK.DTMF(双音频)两种,普通推广的是FSK."来电显示"又称"主叫号码显示"(Calling Identity Delivery) ...

  3. 【转】谈“P=NP?”

    “P=NP?” 通常被认为是计算机科学最重要的问题.有一个叫Clay Math的研究所,甚至悬赏 100 万美元给解决它的人.可是我今天要告诉你的是,这个问题其实是不存在的,它根本不需要解决. 我并不 ...

  4. Android Intent Scheme URLs攻击

    0x0 引言 我们知道,在Android上的Intent-based攻击非常普遍.这样的攻击轻则导致应用程序崩溃.重则可能演变提权漏洞.当然,通过静态特征匹配,Intent-Based的恶意样本还是非 ...

  5. 云从科技 OCR任务 pixel-anchor 方法

    云从科技提出了一种端到端的深度学习文本检测框架Pixel-Anchor,通过特征共享的方式高效的把像素级别的图像语义分割和锚检测回归放入一个网络之中, 把像素分割结果转换为锚检测回归过程中的一种注意力 ...

  6. Token：服务端身份验证的流行方案【转】

    01- 身份认证 服务端提供资源给客户端,但是某些资源是有条件的.所以服务端要能够识别请求者的身份,然后再判断所请求的资源是否可以给请求者. token是一种身份验证的机制,初始时用户提交账号数据给服 ...

  7. 基于PHP规范的自动加载方式(composer配置)

    针对PHP这种编程语言,到目前FIG指定了五个规范,分别如下: PSR0:自动加载: PSR1:基本代码规范: PSR2:代码样式规范: PSR3:日志接口规范: PSR4:自动加载规范: 看上去PS ...

  8. Generics Variance

    http://research.microsoft.com/pubs/64031/designandimplementationofgenerics.pdf Variance and Generali ...

  9. angular学习笔记(七)-迭代1

    本篇介绍angular中元素的迭代: <!DOCTYPE html> <html ng-app> <head> <title>4.1.迭代</ti ...

  10. zend studio 安装后一体化配置

    1.安装语言包http://www.eclipse.org/babel/downloads.php 11.0的时候仍然是junohttp://download.eclipse.org/technolo ...