css3-filter滤镜总纲

filter属性允许您向文本和图像添加更多的样式效果,可替代部分ps的效果。

注释:1.若需要使用 filter 属性,请始终指定元素的宽度。

           2.除非 background-color 属性被设置为 transparent,否则某些 Filter 属性将无法工作!


属性参数描述例子
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
允许您设置元素的透明度
filter:alpha(  opacity=20,  finishopacity=100,  style=1,  startx=0,   starty=0,  finishx=140,  finishy=270)
blur
  • add
  • direction
  • strength
使元素模糊
filter:blur(  add=true,  direction=90,  strength=6);
chromacolor使指定的颜色透明
filter:chroma(  color=#ff0000)
fliphnone水平反转元素filter:fliph;
flipvnone垂直反转元素filter:flipv;
glow
  • color
  • strength
使元素发光
filter:glow(  color=#ff0000,  strength=5);
graynone用黑白色来呈现元素filter:gray;
invertnone用反转的颜色和亮度值来呈现元素filter:invert;
maskcolor呈现带有指定背景色和透明前景色的元素
filter:mask(  color=#ff0000);
shadow
  • color
  • direction
呈现带有阴影的元素
filter:shadow  (color=#ff0000,  direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
呈现带有阴影的元素
filter:dropshadow  (color=#ff0000,  offx=5,  offy=5,  positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
把元素呈现为波浪状
filter:wave(  add=true,  freq=1,  lightstrength=3,  phase=0,  strength=5)
xraynone使用黑白色显示带有反转色和亮度值的元素filter:xray;


dom获取filter属性:obj.filters.属性名,例如:obj.filters.blur;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值