笔记 - 10.4、HTML - CSS滤镜笔记

15.CSS滤镜filter:(filter属性不属于w3c标准,只对IE有效)
--- ①不透明度:
    filter:alpha(参数1=参数值, 参数2=参数值, . . .);
    参数:
      -- opacity:开始时的透明度,取值范围为0-100,默认值为0,即为完全透明,100为完全不透明;
      -- finishopacity:结束是的透明度,取值为0-100;
      -- style:设置渐变的样式,其中0表示无渐变,1为直线渐变,2为圆形渐变,3为矩形渐变;
      -- startx:设置透明渐变的开始点的水平坐标。其参数值作为对象宽度的百分比处理,默认值为0;
      -- starty:设置透明渐变的开始点的垂直坐标;
      -- finishx:设置透明渐变的结束点的水平坐标;
      -- finishy:设置透明渐变的结束点的垂直坐标。

--- ②动感模糊blur:
    filter:blur(add=参数值, direction=参数值, strength=参数值);
    参数:
      -- add:设置是否显示原始图片,取值为true或false;
      -- direction:设置动感模糊的方向,按顺时针的方向以45度为单位进行累积;
      -- strength:设置动感模糊的强度,只能使用整数来指定默认是5个。

--- ③对颜色进行透明处理chroma:
    filter:chroma(color=颜色值);
    参数:
      -- color:需要进行透明处理的颜色值。

--- ④阴影效果dropShadow:
    filter:dropShadow(color=阴影颜色, offX=参数值, offY=参数值, positive=参数值);
    参数:
      -- color:阴影的颜色;
      -- offX:阴影相对原始图像的移动的水平距离;
      -- offY:阴影相对原始图像的移动的垂直距离;
      -- positive:设置 阴影是否透明,1或0。

--- ⑤对象翻转flipH、flipV:
    flipH滤镜用于设置沿水平方向翻转对象,flipV滤镜用于设置沿垂直方向翻转对象。
    filter:flipH;
    或
    filter:flipV;

--- ⑥发光效果glow:
    用于设置在对象周围产生发光的效果。
    filter:Glow(color=颜色, strength=强度值);
    参数:
      -- color:设置发光的颜色;
      -- strength:设置光的强度。取值为1~255,默认值为5。

--- ⑦灰度处理gray:
    用于把彩色图片中的色彩去掉,转换为黑白图片。
    filter:Gray;

--- ⑧反相invert:
    用于设置图片的反相,可以将图片的颜色,饱和度以及亮度完全反转过来。
    filter:invert;

--- ⑨X光片效果xray:
    用于制作类似X光片的效果。
    filter:Xray;

--- ⑩遮罩效果mask:
    用于为对象产生遮罩效果,可以做出像印章一样的效果。
    filter:Mask(color=颜色);
    参数:
      -- color:颜色值。

--- ⑩①波形滤镜wave:
    用于为对象内容创建波纹扭曲效果。
    filter:wave(add=参数值, freq=参数值, lightstrength=参数值,phase=参数值, strength=参数值);
    参数:
      -- add:设置是否要把对象按照波形样式打乱,true或false;
      -- freq:设置图片上的波浪数目;
      -- lightstrength:设置波浪的光照强度,取值为0~100;
      -- phase:设置波浪的起始位置;
      -- strength:波浪的强度大小。

时间: 2024-09-01 10:58:02

笔记 - 10.4、HTML - CSS滤镜笔记的相关文章

CSS选择器笔记

去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查看.这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步. 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器.今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定. ===================== CSS选择器笔记 阮一峰 整理 参考网址:456 Berea Street 一.基本

操作系统概念学习笔记 10 CPU调度

操作系统概念学习笔记 10 CPU调度 多道程序操作系统的基础.通过在进程之间切换CPU,操作系统可以提高计算机的吞吐率. 对于单处理器系统,每次只允许一个进程运行:任何其他进程必须等待,直到CPU空闲能被调度为止. 多道程序的目标是在任何时候都有某些进程在运行,以使CPU的使用率最大化.多道程序的思想较为简单,当一个进程必须等待时,操作系统会从该进程拿走CPU的使用权,而将CPU交给其他进程. CPU-I/O 区间周期 CPU的成功调度依赖于进程的如下属性: 进程执行由CPU执行周期和I/O等

thinkphp学习笔记10—看不懂的路由规则

原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂.   1.路由定义 要使用路由功能需要支持PATH_INFO,PATH_INFO是什么呢?手册中提到"要使用路由功能,前提是你的URL支持PATH_INFO(或者兼容URL模式也可以,采用普通URL模式的情况下不支持路由功能)," , url支持path_info,不是apache要支持path_info么,度娘讲的还算清楚一点,见下文: p

CSS滤镜:FlipH、FlipV属性

css|滤镜 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转.它们的表达式很简单,分别是: Filter:FlipH Filter:FlipV 我们先来看一幅图:点击可放大   下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转.代码如下: <html> <head> <title>flip css</title> <style>//*设置CSS样式开始*// <!-- div{po

用CSS滤镜巧制3D按钮式导航条

css|按钮|导航|滤镜 平面的导航条看多了,想不想做个3D的,当然制作的方法很多,真是仁者见仁,智者见智.我试着做了个按钮式的,效果还不错,每一个菜单项看起来都是一个个的按钮,制作方法也不复杂,并且大小只有几k,算瘦小的了.你只要有点html和CSS的基础知识就够了. 下面我们开始制作: 第一步: 用Dreamweaver建立一个3x1的表格,宽度为70px,不设高度值,边框设为0,间距(cellspacing)为2. 第二步: 在上面已经建立好的表格的单元格中分别插入一个1x1的表格,高度值

妙用CSS滤镜为图片加上特殊效果

css|滤镜 有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事.       我们先从较简单的开始,介绍几个没有参数的滤镜.      1.Gray滤镜        Gray滤镜的作用是产生黑白效果        使用方法:<img src="http://www.webjx.com

实例详解CSS滤镜(5)DropShadow属性

ado|css|滤镜|详解 DropShadow属性是为了添加对象的阴影效果的.它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影.看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色. Offx和offy分别X方向和Y方向阴影的偏移量.偏移量必须用整数值来设置.如果设置为正整数,代表X轴的右方向和Y轴的向下方向.

精彩实例详解CSS滤镜教程

css|教程|滤镜|详解 使您由浅入深了解CSS滤镜的使用,是一个不错的教程!希望对您学习CSS有用! 1.实例详解CSS滤镜(1)概述 (2005-05-04) 2.实例详解CSS滤镜(2)Mask属性 (2005-05-04) 3.实例详解CSS滤镜(3)Blur属性 (2005-05-04) 4.实例详解CSS滤镜(4)Chroma属性 (2005-05-04) 5.实例详解CSS滤镜(5)DropShadow属性 (2005-05-04) 6.实例详解CSS滤镜(6)Glow属性 (20

学习网页制作技术CSS滤镜样式的语法规则

css|滤镜|网页|语法 style="filter:滤镜名(属性1=值1,属性2=值2......)" 其中,"滤镜名"就是你在DW样式设置模块的滤镜下拉列表中看到的名称,属性值只需填入数字即可. 下面是DW所提供的主要几个滤镜的功能说明: (以下二组表格采用了"盒子"."边框"."区块"."类型"等CSS样式) Alpha:设置透明层次blur:创建高速度移动效果,即模糊效果Chro