zoukankan      html  css  js  c++  java
  • CSS3 Filter

    第一,css3种的filter和css IE浏览器下的filter不是一个东西

    第二,filter的兼容性可点击这个网址查询

    第三,filter的语法 filter: none | filter-function [ filter-function ]*

    第四 filter-function有10种类型

    • grayscale灰度 值为0-1之间的小数
    • sepia褐色 值为0-1之间的小数
    • saturate饱和度 值为num(小于0神似无效)
    • hue-rotate色相旋转 角度值*deg
    • invert反色 值为0-1之间的小数
    • opacity透明度 值为0-1之间的小数
    • brightness亮度 值为0-1之间的小数
    • contrast对比度 值为num
    • blur模糊 值为长度 *px
    • drop-shadow阴影 x轴偏移值 y轴偏移值 模糊半径 阴影颜色


    原图

    灰度 -webkit-filter: grayscale(1);

    褐色 -webkit-filter: sepia();

    饱和度 -webkit-filter: saturate(0.5);

    色相旋转 -webkit-filter: hue-rotate(50deg);

    反色 -webkit-filter: invert(1);

    透明度 -webkit-filter: opacity(0.5);

    亮度 -webkit-filter: brightness(1.5);

    对比度 -webkit-filter: contrast(1.5);

    模糊 -webkit-filter: blur(2px);

    阴影 -webkit-filter: drop-shadow(5px 5px 5px #000);

    多个功能叠加 -webkit-filter: sepia() saturate(4) hue-rotate(295deg);

    加上transition transition: 1s filter, 1s -webkit-filter; 移动到图片上看效果

  • 相关阅读:
    Android 通过adb shell命令查看内存,CPU,启动时间,电量等信息
    Android 常见adb命令
    禅道项目管理软件 为提交Bug页面添加“优先级”字段
    禅道项目管理软件 为提交Bug页面设置bug必填字段
    Monkey Android app稳定性测试工具之Monkey使用教程
    移动设备 小米2S不显示CD驱动器(H),便携设备,MTP,驱动USB Driver,MI2感叹号的解决方法
    Python Elasticsearch api
    Kafka 集群配置SASL+ACL
    kafka集群搭建
    Zookeeper集群搭建以及python操作zk
  • 原文地址:https://www.cnblogs.com/lisa-lin/p/5508914.html
Copyright © 2011-2022 走看看