css3中颜色值用HSLA表示

最新推荐文章于 2024-09-24 13:46:40 发布

转载最新推荐文章于 2024-09-24 13:46:40 发布 · 2.8k 阅读

本文介绍如何使用 CSS3 的 hsla 模型创建渐变背景效果，包括色调、饱和度、亮度和透明度等参数的设置，并通过实例展示了四种不同方向的线性渐变。

一看见css3 我们就知道IE8及其以下都不支持

其有四个参数

h 表示色调从0-360

s 饱和度 0 - 100%

l 亮度 0 -100%

a 透明度 0-1

还是来个例子吧

      background: -webkit-linear-gradient(45deg, hsla(190, 100%, 50%, 1) 0%, hsla(190, 100%, 50%, 0) 70%),
                        -webkit-linear-gradient(315deg, hsla(199, 98%, 48%, 1) 10%, hsla(199, 98%, 48%, 0) 80%),
                        -webkit-linear-gradient(225deg, hsla(190, 100%, 50%, 1) 10%, hsla(190, 100%, 50%, 0) 80%),
                        -webkit-linear-gradient(135deg, hsla(199, 98%, 48%, 1) 100%, hsla(199, 98%, 48%, 0) 70%);
            background: linear-gradient(45deg, hsla(190, 100%, 50%, 1) 0%, hsla(190, 100%, 50%, 0) 70%),
                        linear-gradient(135deg, hsla(199, 98%, 48%, 1) 10%, hsla(199, 98%, 48%, 0) 80%),
                        linear-gradient(225deg, hsla(190, 100%, 50%, 1) 10%, hsla(190, 100%, 50%, 0) 80%),
                        linear-gradient(315deg, hsla(199, 98%, 48%, 1) 100%, hsla(199, 98%, 48%, 0) 70%);

具体想要的色值可以自己搜索一下