CSS hsl() 语法
在传统的 CSS 中，hsl() 函数用于通过色相（hue）、饱和度（saturation）和亮度（lightness）来定义颜色。
在最新版本的 CSS 中，hsl() 和 hsla() 这两个函数已经合并了。在传统的 CSS 中，hsl() 函数不支持透明度。但在最新的 CSS（CSS Color Level 4）中，hsl() 已经支持设置透明度了。
语法：
hsl(hue, saturation, lightness, alpha)说明：
hsl() 函数接受以下 4 个参数。
- 色相（hue）：是一个角度值，取值范围为 0 到 360 。
- 0（或 360）表示红色。。
- 120 表示绿色。
- 240 表示蓝色。
- 饱和度（saturation）：是一个百分比值，取值范围为 0% 到 100%。
- 0% 表示灰色（无色）。
- 100% 表示完全饱和。
- 亮度（lightness）：是一个百分比值，取值范围为 0% 到 100%。
- 0% 表示黑色。
- 100% 表示白色。
- 50% 表示正常亮度。
- 透明度（alpha）：颜色的不透明程度，取值范围是 0 到 1（也可以是 0% 到 100%）。
- 0 表示完全透明。
- 1 表示完全不透明。
示例：
/* 不带 alpha */
hsl(0, 100%, 50%); /* 红色 */
hsl(120, 100%, 50%); /* 绿色 */
hsl(240, 100%, 50%); /* 蓝色 */
hsl(0, 0%, 50%); /* 灰色 */
/* 带 alpha */
hsl(0, 100%, 50%, 0.5); /* 半透明红色 */
hsl(120, 100%, 50%, 0.3); /* 透明绿色 */
hsl(240, 100%, 50%, 1); /* 不透明蓝色 */对于 hsl() 函数，小伙伴们需要清楚以下几点：
- hsl() 函数可以用于任何接受颜色值的 CSS 属性，比如 color、background-color、border-color 等。
- hsl() 比 rgb() 更加直观，它适合调整色调、饱和度或亮度。例如，如果你想使颜色变得更鲜艳，只需要增加饱和度即可；想让颜色变亮或变暗，只需要调整亮度即可。
CSS hsl() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS hsl() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS hsl() 函数是如何使用的。
示例 1：hsl() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: hsl(0, 100%, 50%); /* 红色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们使用 hsl() 来为 div 元素设置背景颜色。hsl(120, 100%, 50%) 表示：
- 色相为 120 度（绿色）。
- 饱和度为 100%（完全饱和）。
- 亮度为 50%（正常亮度）。
最终，显示的颜色是 “纯红色” 。
示例 2：hsl() 实现不同的红色变体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: flex;
gap: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.box1 { background-color: hsl(0, 50%, 50%); } /* 低饱和度红色 */
.box2 { background-color: hsl(0, 100%, 50%); } /* 纯红色 */
.box3 { background-color: hsl(0, 100%, 25%); } /* 深红色 */
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们通过调整 hsl() 函数的饱和度和亮度来显示不同的红色变体。
- box1 使用较低饱和度（50%）生成柔和红色。
- box2 使用 100% 饱和度和 50% 亮度生成纯红色。
- box3 使用较低亮度（25%）生成深红色。
示例 3：hsl() 带 alpha
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: hsl(240, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
