专注前端行业精选

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

作者：鹏仔先生日期：2020-06-03 09:50:04浏览：1786分类：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

前端 css

手机扫码访问

猜你还喜欢