专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-03浏览:455分类:CSS


扩展一: 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


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

请填写验证码

关灯