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);}
CSS3的Filter属性的十种效果_第1张图片
-webkit-filter:sepia(1);

③-webkit-filter:saturate(0.5);

④-webkit-filter:hue-rotate(90deg);
CSS3的Filter属性的十种效果_第2张图片
⑤-webkit-filter:invert(1);
CSS3的Filter属性的十种效果_第3张图片


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


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

⑧-webkit-filter:contras
t(5);
CSS3的Filter属性的十种效果_第4张图片
-webkit-filter:blur(3px);
CSS3的Filter属性的十种效果_第5张图片
⑩-webkit-filter:drop-shadow(5px 5px 5px #ccc);
CSS3的Filter属性的十种效果_第6张图片





 


你可能感兴趣的:(CSS3的Filter属性的十种效果)