Css的filter常用滤波器属性及语句大全
语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
滤镜说明:
Alpha:设置透明层次
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样
1、滤镜:Alpha
语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明:
Opacity:起始值,取值为0~100, 0为透明,100为原图。
FinishOpacity:目标值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜:blur
语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明:
Add:一般为1,或0。
Direction:角度,0~315度,步长为45度。
Strength:效果增长的数值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜:Chroma
语法:STYLE="filter:Chroma(Color = color)"
说明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
4、滤镜:DropShadow
语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值。
Offy:Y轴偏离值。
Positive:1或0。
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜:FlipH
语法:STYLE="filter:FlipH"
例子:filter:FlipH
6、滤镜:FlipV
语法:STYLE="filter:FlipV"
例子:filter:FlipV
7、滤镜:glow
语法:STYLE="filter:Glow(Color=color, Strength=strength)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、滤镜:gray
语法:STYLE="filter:Gray"
例子:filter:Gray
9、滤镜:invert
语法:STYLE="filter:Invert"
例子:filter:Invert
10、滤镜:mask
语法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
11、滤镜:shadow
语法:filter:Shadow(Color=color, Direction=direction)
说明:
Color:#rrggbb格式。
Direction:角度,0-315度,步长为45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜:wave
语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜:Xray
语法:STYLE="filter:Xray"
例子:filter:Xray
14.颜色变化
语法:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');
转载于:https://blog.51cto.com/steave/85194
Css的filter常用滤波器属性及语句大全相关推荐
- WordPress 常用数据库SQL查询语句大全
https://www.wpdaxue.com/wordpress-sql.html 在使用WordPress的过程中,我们少不了要对数据库进行修改操作,比如,更换域名.修改附件目录.批量修改文章内容 ...
- Css的filter常用濾波器屬性及語句大全
濾鏡說明: Alpha:設置透明層次. blur:創建高速度移動效果,即模糊效果. Chroma:製作專用顏色透明. DropShadow:創建對象的固定影子. FlipH:創建水 ...
- [css] box-sizing常用的属性有哪些?分别有什么作用?
[css] box-sizing常用的属性有哪些?分别有什么作用? box-sizing常用的属性有 content-box 和 border-box.content-box 盒子的宽度不包含 bor ...
- CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
- css常用的属性(边框三角形,文本省略号)
文章目录 边框 列表 背景 文本 显示省略号 边框 边框相关属性 border-width 边框宽度 属性值:length(数值+单位)例如 width:10px border-style 边框样式 ...
- CSS常用样式属性有哪些?代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
- css样式lighter的意思,css常用的属性
CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...
- css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录 一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局 二.字体属性 2.1 字体颜色 2.2 字体大 ...
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
最新文章
- centos linux内核编译环境,CENTOS linux kernel 内核编译
- 计算机关机又自动重启,为什么w7电脑关机后自动重启_w7电脑关机后自动重启怎么解决...
- 转载:用大白话聊聊分布式系统
- envoy实现_如何利用 Envoy 的 Postgres 过滤器实现网络可观察性
- Android 捕获异常,上报异常日志,捕获奔溃日志,bugly使用实例
- 把VOC数据集转化成txt文件python
- 判断二叉树是否平衡二叉树
- 2017年计算机导论试题,2017年云南农业大学基础与信息工程学院813计算机导论与数据结构考研题库...
- ABAP 自建透明表维护
- 怒肝三个月啃完这110道面试题,跳槽薪资翻倍
- Redis 列表(List) Redis Lpush 命令
- 小精灵无尽的长廊_绝顶高手的养成日常
- C++:什么是RAII? | 智能指针的初步讲解 | 智能指针是为了避免什么问题?| 被遗弃的auto_ptr
- 【转载】我为什么鼓励工程师写blog
- 小程序 订阅消息 wx.requestSubscribeMessage 允许 拒绝 情况的返回 结果
- 网易楚留香获取服务器信息,楚留香手游生活采集物有哪些 获取攻略
- 栈、队列、数组的区别
- 中等职业学校计算机课程标准,全市中等职业学校信息技术课程标准内涵解析与教学设计培训会议成功举办...
- 智能合约--如何实现可升级的智能合约
- 如何使用python编程抢京东优惠券 知乎_小猿圈Python之实现京东秒杀功能代码
热门文章
- 单帧风景照变延时摄影,分分钟搞定,还能有昼夜变化,这是来自日本的开源动画景观算法...
- 一位中国博士把整个CNN都给可视化了,可交互有细节,每次卷积ReLU池化都清清楚楚...
- Hand on Machine Learning第三章课后作业(1):垃圾邮件分类
- RxJava从入门到不离不弃(四)——过滤操作符
- LeetCode 448. Find All Numbers Disappeared in an Array 442. Find All Duplicates in an Array
- 电信运营商 IT 系统介绍
- 拥有懂需求的云计算供应商,是一种怎样的体验
- shell MAC 地址 校验
- openstack学习笔记三 创建第一个实例
- WinForm窗体间如何传值