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

2024年03月25日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客


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


本文链接:http://so.lmcjl.com/news/351/

展开阅读全文
相关内容