Css3扩展小知识 c3蒙版 c3倒影 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;扩展三: Css 0 Comments


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


本文链接：https://my.lmcjl.com/post/20951.html

展开阅读全文

相关文章

4 评论

留下您的评论.