zoukankan      html  css  js  c++  java
  • CSS3 filter属性学习

    filter属性:
    CSS3的fliter属性是一个强大的工具,开发者可用它实现很多视觉效果
    。该属性提拱了如阴影和改变颜色等效果,这些效果的在元素渲染是完成
    。该属性通常用于调整图片的呈现、一个元素的背景或者边框。

    语法:

    .filter-me{filter:<filter-function>[filter-function] *|none}


    filter函数有以下一些:

    blur(Npx)——设置高斯模糊,传入一个像素单位,表示模糊半径,默认
    值为0,没有模糊,不可取百分数。


    brightness()——设置亮度,0% 使元素变成黑色,默认值为100%,不改
    变亮度,可以超过100%,表示加亮。


    contrast()——设置颜色对比度,0%使元素变成黑色,默认值为100%,不
    改变,可以超过100%。


    drop-shadow(<length>{2,3},<color>?)——设置阴影背景,前三个参
    数表示 水平偏移、垂直偏移和阴影半径,颜色是阴影颜色。


    grayscale()——设置灰度,参数表示灰色的占比,0%不改变,默认值为
    100%,完全灰色。负值不可用。


    hue-rotate()——色相旋转,参数是一个角度,默认参数为0deg表示色
    相不旋转,最大为360deg。(色相是啥子??)


    invert()——设置反色,0%表示和不设置效果一样,默认值为100%表示
    完全翻转,100%可模拟交卷底片。不可取负值。


    opacity()——设置透明度,默认值为 1 ,表示不透明。这个和 opacity
    属性类似,不同之处是一些浏览器为filter提供硬件加速。不可取负值

    saturate()——设置饱和度,0%表示完全不饱和,100%表示不改变饱和
    度,超过100%表示超饱和,负值不可取。


    sepia()——设置复古程度,0%表示不改变,默认值为100%,表示完全复
    古。负值不允许。


    url()——用 SVG 设置 filters


    custom()——还未实现该方法。

    可用多个函数,以空格分割,如果传入的参数非法,函数将返回 none,
    参数可以是百分数,也可以是 十进制小数。特别注意,grayscale()函
    数用在 sepia()后面捡导致完全灰色的输出。目标元素的任何一部分都
    被filter影响,包括 content、background、border、text-
    decoration、outline、滚动条和后代元素。filter也可用于行内元素。
    eg span。

    参考文章:filter    Quick Fun: CSS3 Filter Effects  

    CSS3 Filter的十种特效

    点击看更多 filter效果 cssreflex

  • 相关阅读:
    设计一个字符串类,并将字符串处理函数的内容进行封装
    C++字符串处理函数【自写】
    文件共享服务器nfs搭建过程
    svn服务器的搭建过程 主要为服务端
    uwsgi和wsgi
    熟悉了下HTTP协议
    ModelForm views.py
    隐藏tomcat nginx版本信息
    csrf
    开发模式
  • 原文地址:https://www.cnblogs.com/jackzhoumine/p/6618678.html
Copyright © 2011-2022 走看看