<!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. php做EXCEL数据导出导入开发的一些小问题

    前两天刚刚做开发CRM系统项目,在做要做EXCEL导出导入功能,因为以前做.NET开发用的是NPOI,但可是没找到PHP版本的,所以就网搜找了个国外的开源PHPEXCEL , 一开始只是做了简单的导入 ...

  2. MSSQLSERVER数据库- 慎用SELECT INTO复制表

    很多时候我们习惯于用SELECT INTO复制一个表或表结构,因为它方便,快捷,而且在某些情况下效率比INSERT INTO 效率要高一些.但是要注意: SELECT INTO 复制表或表结构的时候, ...

  3. vs2015 配置opencv3.0遇到的问题

    1.问题 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C2872 "ACCESS_MASK": 不明确的符号 FaceFeature_GSF C:\Program Fi ...

  4. navicat for mysql (10038)如何解决,远程无法连接问题

    ubuntu server下安装了MySQL 5.5数据库,然后在windows下通过Navicat for MySQL连接时,出现 Can't connect to mysql server on ...

  5. spring关于“transactionAttributes”的相关配置

    spring关于"transactionAttributes"的相关配置 <bean id="baseTransactionProxy" class=&q ...

  6. Gradle的安装与配置

    Gradle的下载地址:http://gradle.org/gradle-download/ Tips:要先安装JDK并配置其环境变量. 下载完成后将里面的文件解压出来,如下图所示: 添加一个名称为G ...

  7. BugZilla的安装过程简明教程

    Bugzilla+Mysql+iis+perl模块+ ActivePerl 安装过程 (原:http://www.cnblogs.com/Warmsunshine/archive/2012/03/25 ...

  8. HTML5 面试中最常问到的 10 个问题

    1. HTML5 新的 DocType 和 Charset 是什么?HTML5 现在已经不是 SGML 的子集,DocType 简化为:                  <!doctype h ...

  9. Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件

    Fixflow引擎解析(四)(模型) - 通过EMF扩展BPMN2.0元素 Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件 Fixflow引擎解析(二)(模型) - BPMN ...

  10. sqlite数据下载链接地址

    链接: http://pan.baidu.com/s/1pJN1abT 密码: yjg5