CSS 滤镜学习小结

适用浏览器：

IE。不符合CSS 标准

定于语法：

filter:filtername{parameters};

分类：

基本滤镜--可直接作用在对象上，并立即生效，主要有：

1).alpha--通道

2).blur--模糊

3)MotionBlur--移动模糊

4)Chroma--透明色

5)Drop Shadow--下落阴影

6)Flip--对称变换

7)Glow--光晕

8)GrayScale--灰度

9)Invert--反色

10)Mask--遮罩

11)Shadow--阴影

12)X-ray--X光效果

13)Emboss or Engrave--浮雕

14)Wave--波浪

高级滤镜--需配合JS等脚本使用，产生更绚丽的变幻效果，主要有

1)BlendTrans -- 渐隐变换

2)RevealTrans--变换

3)Light --灯光

alpha

filter:alpha(opacity=opacity,finishopacity=finishopacity,startX=startX,
startY=startY,finishX=finishX,finishY=finishY);

opacity: 透明度等级，取值 0-100(0完全透明)
style: 透明区域的形状特征，取值 0,1,2,3
0-统一形状 1-线性 2--圆形放射渐变 3--矩形放射渐变
X,Y这种的为坐标参数了

blur

filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=makeshadow,pi
xelradius=pixelradius,shadowopacity=shadowopacity);

makeshadow设置对象的内容是否被处理为阴影，
pixelradius设置模糊效果的作用深度。
shadowopacity设置使用makeshadow制作成的阴影
的透明度

例子：
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);

MotionBlur

filter:porgid:DXImageTransform.Microsoft.MotionBlur(add=add,direc
tion=direction,strength=strength);

add:指定是否叠加原图片。
取值 true, false
direction: 设置模糊的方向。0表示垂直向上。默认向左270
strength: 有多少像素的宽度受到模糊的影响

例子：
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true); /* 水平向右 */

Chroma

filter:chroma(color:color)

color:希望透明的颜色值

例子：
filter:chroma(color=FF6800); /* 去掉金黄色 */

Dropshadow

filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive);

color:投射阴影的颜色
offx和offy分别表示x方向和y方向阴影的偏移量。
positive:
true--任何非透明像素建立可见的投影
false--透明的像素部分建立可见的投影

例子：
.drop1{
filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true);
}
.drop2{
filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);
}

flip

filter:fliph
filter:fiipv

fliph:水平翻转
flipv:竖直翻转

例子：
.flip2{
filter:flipv; /* 竖直翻转 */
}
.flip3{
filter:flipv fliph; /* 水平、竖直同时翻转 */
}

Glow

filter:Glow(color=color,strength=strength);

color: 发光的颜色
strength: 发光的强度。（1-255）

例子：
filter:glow(color=#FFFF99,strength=6); /* 发黄色光 */

Gray

filter:gray;

filter:gray; /* 黑白图片 */

Invert

filter:invert

例子：
filter:invert; /* 底片效果 */

Mask

filter:mask(color=color);

color:指定使用什么颜色作为掩膜

例子：
filter:mask(color=#8888FF); /* 遮罩效果 */

Shadow

filter:shadow(color=color,direction=direction);

color: 设置阴影的颜色
direction: 设置阴影的方向

例子：
.shadow{
    filter:shadow(color=#CCCCFF,direction=135);    /* 阴影效果 */
}
.drop{
    filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);
    /* 下落阴影 */
}

X射线

filter:xray;

例子：
.xray{
filter:xray; /* X光效果 */
}
.gray{
filter:gray; /* 黑白效果 */
}

CSS 滤镜学习小结相关推荐

CSS选择器学习小结
前言: 半途出家做Front End,以前只是大概知道点,现在就必须从头把css好好看看啦,呜呜~~~~~~ 一.基本选择器序号选择器含义 1. * 通用元素选择器,匹配任何元素 2. E 标签 ...
CSS选择器学习小结 (css基本选择器 + 组合选择器 + :nth-child()高级选择器)
目录 css基本选择器: 通用选择器: 格式: 元素选择器: 格式: 样例: id选择器: 格式: class类选择器: 格式: 分组选择器: 格式: 基本选择器的权重: css组合选择器: 后代选择 ...
css显示内容越来越模糊_纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...
html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
jquery on方法原理_jQuery 学习小结
jQuery 学习小结相较于原生 JS,jQuery 通过 API 接口写更少的代码,做更多的事情.虽然这个元老级别的技术库的使用率已经渐渐在减少了,不过了解其原理和用法还是很有用的. jQuery ...
全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
【HTML5学习小结(1)】
HTML5学习小结了解Web 一.web网页 1.网页究竟是什么? 2.认识网页 3.构成网页的要素有哪些? 4.web页面的组成. 二.web标准 1.结构标准 2.样式标准 3.行为标准二.H ...
原生小程序学习小结，mpvue+mpvue-weui+fyl.js小程序项目搭建笔记
官方文档:https://developers.weixin.qq.... 学习小结: 1.小程序.订阅号及服务号都是在微信公众平台的体系下,但小程序本身与订阅号及服务号是完全独立的,需要重新注册: ...
Python - 输出格式 (学习小结)
Python - 输出格式 (学习小结) Bu.xing 利用现代手段,创建学习家园关注他 1 人赞同了该文章 Python 输出格式我们常说的输出格式分两种含义: # 一种是指数据在屏幕上的显 ...

CSS 滤镜学习小结

CSS 滤镜学习小结相关推荐

最新文章

热门文章