CSS3的Filter属性的十种效果

1、语法
elm { filter: none ; }

2、可选值有以下十种
  grayscale     灰度
  sepia       棕色调
  saturate     饱和度
  hue-rotate    色相旋转
  invert      反色
  opacity 透明度
  brightness    亮度
  contrast     对比度
  blur       模糊
  drop-shadow   阴影
3、示例 (括号内可设置0-1之间的任何值,默认值为100%)
  原始图


  
.grayscale{-webkit-filter:grayscale(1);}

-webkit-filter:sepia(1);

③-webkit-filter:saturate(0.5);

④-webkit-filter:hue-rotate(90deg);

⑤-webkit-filter:invert(1);


⑥-webkit-filter:opacity(.5);


⑦-webkit-filter:brightness(.5);

⑧-webkit-filter:contras
t(5);

-webkit-filter:blur(3px);

⑩-webkit-filter:drop-shadow(5px 5px 5px #ccc);






 


posted @ 2016-03-26 21:04  稳稳199*  阅读(114)  评论(0编辑  收藏  举报