<!DOCTYPE html>

 <html>

 <head>

 <style>

 img {

     width: 33%;

     height: auto;

     float: left;

     max-width: 235px;

 }

 .blur {-webkit-filter: blur(4px);filter: blur(4px);}

 .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}

 .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

 .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

 .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

 .invert {-webkit-filter: invert(100%);filter: invert(100%);}

 .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

 .saturate {-webkit-filter: saturate(7); filter: saturate(7);}

 .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

 .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

 </style>

 </head>

 <body>

 <p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>

 <img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

 </body>

 </html>

CSS3滤镜！！！的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 【CSS3】CSS3 滤镜实现

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

  7. CSS3滤镜

    今天在办公室亲眼目睹了同事使用CSS3滤镜为一张漂亮的照片轮廓加上了阴影,瞬间亮瞎了我的的双眼,见笑了. 所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼 ...

  8. CSS3 滤镜学习

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

  9. CSS3 滤镜Filter亮度动画

    CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...

  10. CSS3 滤镜

    了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生,CSS3对各种滤镜效果有了支持,可以做出很多好玩儿效果,走马观花了解一下 语法 filter: function(param); 很很多CSS3 ...

随机推荐

  1. [置顶] MapReduce 编程之 倒排索引

    本文调试环境: ubuntu 10.04 , hadoop-1.0.2 hadoop装的是伪分布模式,就是只有一个节点,集namenode, datanode, jobtracker, tasktra ...

  2. iOS开发Block的使用

    Block 是从 iOS4引入的,在日常开发中,会经常用到Block.特别是在多线程中,Block的用处更广泛.而且,Block不仅可以接收参数,其本身也可以作为参数,因此,Block的功能非常强大. ...

  3. iOS学习之NSBundle介绍和使用

    iOS学习之NSBundle介绍和使用 http://blog.csdn.net/totogo2010/article/details/7672271 新建一个Single View Applicat ...

  4. SQL 正则表达式使模式匹配和数据提取变得更容易

    SQL Server 2005 正则表达式使模式匹配和数据提取变得更容易 David Banister 本文讨论: 使用正则表达式进行高效的 SQL 查询 SQL Server 2005 对正则表达式 ...

  5. ASP终极防下载（转）

    自从搞ASP+ACCESS没少为避免数据库下载而伤过神,网上的奇淫技巧更是数不胜数,本文就是同大家共同探讨各路前辈的留下的秘笈并指中其中的优劣,最后为大家提供一种最佳的解决方案. 一.开篇 自从搞AS ...

  6. PowerShell远程安装应用程序

    安装MSI包 使用PowerShell调用WMI对象,你可以执行下面的脚本来安装你的MSI安装包: $box="deviis01" #this is the name of you ...

  7. iOS开发——高级技术&密码锁功能的实现

    密码锁功能的实现 一个ios手势密码功能实现 ipad/iphone 都可以用 没有使用图片,里面可以通过view自己添加 keychain做的数据持久化,利用苹果官方KeychainItemWrap ...

  8. HDU 1068 Girls and Boys(最大独立集合 = 顶点数 - 最大匹配数)

    HDU 1068 :题目链接 题意:一些男孩和女孩,给出一些人物关系,然后问能找到最多有多少个人都互不认识. 转换一下:就是大家都不认识的人,即最大独立集合 #include <iostream ...

  9. Windows二进制文件的Python扩展包

    http://www.lfd.uci.edu/~gohlke/pythonlibs/ https://pypi.python.org/simple/

  10. Apache rewrite 详解

    用rewrite可实现的部分:URL根目录搬迁,多目录查找资源,阻止盗连你的图片,拒绝某些主机访问,基于时间重写,据浏览器类型重写,动态镜像远程资源,外部重写程序模板,等等 详见下表: 目标 重写设置 ...