CSS 滤镜详解
序号
|
滤镜
|
描述
|
1
|
Alpha
|
透明的层次效果
|
2
|
Blur
|
模糊效果
|
3
|
Chroma
|
特定颜色的透明效果
|
4
|
Dropshadow
|
阴影效果
|
5
|
FlipH
|
沿水平方向翻转效果
|
6
|
FilpV
|
沿垂直方向翻转效果
|
7
|
Glow
|
边缘光晕效果
|
8
|
Gray
|
灰度效果
|
9
|
Invert
|
将颜色的饱和度和亮度值完全反转
|
10
|
Mask
|
遮罩效果
|
11
|
Shadow
|
渐变阴影效果
|
12
|
Wave
|
波浪变形效果
|
13
|
Xray
|
X 射线效果
|
1. Alpha 滤镜设置透明层次
语法:{filter:Alpha(Opacity=value,Finishopacity=value,Style=value,
StartX=value,StartY=value,FinishX=value,FinishY=value)}
Alpha 滤镜属性值
|
描述
|
Opacity
|
代表透明水准,
默认的范围是0 ~ 100,0代表完全透明,100代表完全不透明
|
Finishopacity
|
一个可选参数,
设置渐变的透明效果时,就用这个参数来指定结束时的透明度
|
Style
|
指定透明区域的形状:0代表统一形状,
1代表线形,
2代表放射状,
3代表长方形
|
StartX
|
渐变透明效果的开始 x 坐标
|
StartY
|
渐变透明效果的开始 y 坐标
|
FinishX
|
渐变透明效果的结束 x 坐标
|
FinishY
|
渐变透明效果的结束 y 坐标
|
例:
.classA{filter:Alpha(Opacity=50,Style=3,StartX=20,StartY=20,
FinishX=420,FinishY=420);}
2. Blur 滤镜模糊效果
语法:
{filter:Blur(Add=value,Direction=value,Strength=value)}
Blur 滤镜属性值
|
描述
|
Add
|
指定图片是否被改变成印象派的模糊效果,取值true | false
|
Direction
|
用来设置模糊的方向,模糊效果按顺时针方向进行,
0度代表垂直向上,然后每45度为一个单位,
默认值为向左 270度
|
Strength
|
代表有多少像素的宽度将受到模糊影响,默认为5个像素
|
例:
.classB{filter:Blur(Add=true,Direction=45,Strength=20);}
3. Chroma 滤镜设置特定颜色的透明
语法:{filter:Chroma(Color=color_value);}
例:
img.classC{filter:Chroma(Color=#4FAA4D);}
4. Dropshadow 滤镜阴影效果
语法:{filter:Dropshadow(Color=value,OffX=value,OffY=value,
Positive=value)}
Dropshadow 滤镜属性
|
描述
|
Color
|
阴影颜色
|
OffX
|
X 轴方向阴影的偏移量,正数表示沿X 轴右方向偏移,
负数表示沿 X 轴左方向偏移
|
OffY
|
Y 轴方向阴影的偏移量,正数表示沿Y 轴向下方向偏移
负数表示沿Y 轴向上方向偏移
|
Positive
|
取值为 true | false
True 表示 为不透明像素建立可见阴影
False表示为透明像素建立可见阴影
|
例:.classD{fiter:DropShadow(Color=gray,OffX=5,OffY=5,Positive=1);}
5. FlipH 滤镜水平翻转效果
语法:{filter:FlipH}
例: img.classF{filter:FlipH;}
6. FlipV 滤镜垂直翻转效果
语法: {filter:FlipV}
例: img{filter:FlipV;}
7. Glow 滤镜设置边缘光晕
语法:{filter:Glow(Color=color_value,Strength=value)}
参数说明:Color : 设定边缘光晕的颜色
Strength:设定边缘光晕的强度大小,范围:1 ~ 255
例:.classG{filter:Glow(Color=pink,Strength=3);}
8. Gray 滤镜灰度效果
语法:{filter:Gray;}
说明:可以把一张图片变成灰度图
9. Invert 滤镜反转效果
语法:{filter:Invert;}
说明:可以把元素的可视化属性全部反转,包括色彩、饱和度和亮度值;
10. Mask 滤镜遮罩效果
语法:{filter:Mask(Color=color_value)}
参数说明:
Color:遮罩所用的颜色
Mask: 将可看见的像素遮蔽,将看不见的像素以指定的颜色显示
11. Shadow 滤镜渐变阴影效果
语法:{filter:Shadow(Color=color_value,Direction=value);}
参数说明:
Color: 设定渐变阴影的颜色
Direction:设定渐变阴影的方向,渐变阴影是按顺时针方向进行的,0度代表垂直向上,然后每45度为一个单位,默认值为向左270度
12. Wave 滤镜波浪变形效果
语法:
{filter:Wave(Add=value,Freq=value,LightStrength=value,
Phase=value,Strength=value)}
Wave 滤镜属性值
|
描述
|
Add
|
是否把元素按照波形样式打乱
|
Freq
|
波纹的频率。即指定在一个元素上需要产生多少个完整的波纹
|
LightStrength
|
增强波纹光影的效果,范围是0 ~ 100
|
Phase
|
设置正弦波的偏移量
|
Strength
|
设置振幅大小
|
例:img.classW{filter:Wave(Add=add,Freq=3,LightStrength=60,
Phase=40,Strength=12);}
CSS Filter Examples
http://www.fred.net/dhark/demos/css/css_filter_examples.html
分享到:
相关推荐
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数) 滤镜说明: alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 chroma:制作专用颜色透明 DropShadow:创建对象的固定...
详细说明了css滤镜的一些常用方法以及各浏览器兼容问题
滤镜
苏沈小雨版本。CSS滤镜参考详解,配合CSS样式表进行使用。WEB设计必备参考之一。
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,通过css对图像进行处理。 浏览器支持情况:只有IE浏览器不支持filter(滤镜)属性,为了兼容低版本的safari和google浏览器,需要加上...
主要介绍了详解CSS3中强大的filter(滤镜)属性的相关资料,需要的朋友可以参考下
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜,通过一个URL链接到SVG滤镜元素(SVG filter...
filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。接下来通过本文给大家介绍微信小程序 CSS filter(滤镜)的使用示例,感兴趣的朋友一起看看吧
具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉...
CSS3的透明度属性opacity想必大家都已经用...而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法,有兴趣的可以了解一下。
要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从...
9.4 用户界面和滤镜属性 258 9.5 本章小结 263 第10章 盒模型与布局相关属性 264 10.1 盒模型和display属性 265 10.2 对盒添加阴影 275 10.3 布局相关属性 278 10.4 CSS 3新增的多栏布局 285 10.5 使用弹性...
text-shadow 语法 CSS Code复制内容到剪贴板 text-shadow: h-shadow v-shadow blur color; 实例 基础的文本阴影效果: CSS Code复制内容到剪贴板 { ...滤镜语法: Eg: CSS Code复制内容
选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开 类名1 类名2 "> 4.id选择器 #id名{样式} 3.特殊选择器 1.群组选择器 #...
代码背景: 为深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞,大多数网站自发全站变灰 ...详解feColorMatrix 15种滤镜 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 作者:宅男呀
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border:1px solid #f00; /* IE滤镜写法; gradientType : 1代表水平方向 , 0 代表垂直线性渐变 ; ...
当在 body 中使用了 filter 滤镜属性的时候,会导致 fixed 元素定位发生错误,即不再相对 viewport 进行定位,而是相对整个网页( body 元素)进行定位。 <html> <head> <title>css filter ...