CSS 滤镜学习小结
例子: filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
例子: filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true); /* 水平向右 */
例子: filter:chroma(color=FF6800); /* 去掉金黄色 */
例子: .drop1{ filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true); } .drop2{ filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false); }
例子: .flip2{ filter:flipv; /* 竖直翻转 */ } .flip3{ filter:flipv fliph; /* 水平、竖直同时翻转 */ }
例子: filter:glow(color=#FFFF99,strength=6); /* 发黄色光 */
filter:gray; /* 黑白图片 */
例子: filter:invert; /* 底片效果 */
例子: filter:mask(color=#8888FF); /* 遮罩效果 */
例子: .shadow{ filter:shadow(color=#CCCCFF,direction=135); /* 阴影效果 */ } .drop{ filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true); /* 下落阴影 */ }
例子: .xray{ filter:xray; /* X光效果 */ } .gray{ filter:gray; /* 黑白效果 */ }
发布日期:2021-10-01 03:31:33
浏览次数:2
分类:技术文章
本文共 2431 字,大约阅读时间需要 8 分钟。
适用浏览器:
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制作成的阴影 的透明度 |
MotionBlur | filter:porgid:DXImageTransform.Microsoft.MotionBlur(add=add,direc tion=direction,strength=strength); | add:指定是否叠加原图片。 取值 true, false direction: 设置模糊的方向。0表示垂直向上。默认向左270 strength: 有多少像素的宽度受到模糊的影响 |
Chroma | filter:chroma(color:color) | color:希望透明的颜色值 |
Dropshadow | filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive); | color:投射阴影的颜色 offx和offy分别表示x方向和y方向阴影的偏移量。 positive: true--任何非透明像素建立可见的投影 false--透明的像素部分建立可见的投影 |
flip | filter:fliph filter:fiipv | fliph:水平翻转 flipv:竖直翻转 |
Glow | filter:Glow(color=color,strength=strength); | color: 发光的颜色 strength: 发光的强度。(1-255) |
Gray | filter:gray; |
Invert | filter:invert |
Mask | filter:mask(color=color); | color:指定使用什么颜色作为掩膜 |
Shadow | filter:shadow(color=color,direction=direction); | color: 设置阴影的颜色 direction: 设置阴影的方向 |
X射线 | filter:xray; |
转载地址:https://blog.csdn.net/iteye_1789/article/details/82158179 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月16日 08时18分56秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Git常用命令总结(快速上手使用)
2019-04-26
Spring框架中@PostConstruct注解的使用
2019-04-26
String StringBuilder StringBuffer区别以及源码分析
2019-04-26
牛客网面试宝典之JAVA基础知识(一)总结
2019-04-26
Linux环境下Kafka的安装与使用(SpringBoot整合云服务器上的Kafka)
2019-04-26
计算机网络笔记总结:Part1 概述
2019-04-26
@JsonFormat和@DataFormat注解解决前后端日期格式一致性问题
2019-04-26
Go语言基本语法 (中)
2019-04-26
Go语言基本语法 (下)
2019-04-26
wkhtmltopdf工具将网站转换成pdf或图片
2019-04-26
SpringBoot仿牛客论坛项目实战
2019-04-26
SpringBoot配置CORS处理前后端分离的跨域问题
2019-04-26
SpringBoot整合云服务器下的FastDFS实现文件上传
2019-04-26
乐优13天UnmappedTerms cannot be cast to org.elasticsearch.search.aggregations.bucket.terms.StringTerms
2019-04-26
SpringBoot整合Thymleaf实现页面静态化
2019-04-26
Linux下安装RabbitMQ并使用SpringBoot整合
2019-04-26
一小时学会使用SpringBoot整合阿里云SMS短信服务
2019-04-26
hibernate-validate的基本使用
2019-04-26