CSS3扩展小知识 CSS蒙版 CSS倒影 hsla模式等语法介绍

扩展一: css3蒙版

    语法:

-webkit-mask-image: url(蒙版图片路径) | 使用渐变作为蒙版;
-webkit-mask-repeat: no-repeat | repeat | repeat-x | repeat-y;
-webkit-mask-position: center;

扩展二: 设置背景在文本区域可见（字体颜色必须变为 transparent）

    语法:

-webkit-background-clip: text;

扩展三: Css3倒影

    语法:

-webkit-box-reflect: 方向 偏移量 渐变;

    方向取值如下:

        left: 倒影在左

        right: 倒影在右

        above: 倒影在上

        below: 倒影在下

    eg:

-webkit-box-reflect: below 0px linear-gradient(rgba(255,255,255,0) 14%, rgba(255,255,255,1) 95%);

hsla模式

    语法:

background: hsla(h,s,l,a);

    h: 色调，取值范围0~360

    s: 饱和度，取值范围0%~100%

    l: 亮度，取值范围0%~100%

    a: 透明度，取值范围0~1