【第1章】参考: 1.1 attr keyframes; 1.2 attr animation; 1.3 attr animation name; 1.4 attr animation duration; 1.5 attr animation timing function; 1.6 attr animation delay; 1.7 attr animation iteration count; 1.8 attr animation direction; 1.9 attr animation play state; 1.10 attr background; 1.11 attr background attachment; 1.12 attr background color; 1.13 attr background image; 1.14 attr background position; 1.15 attr background repeat; 1.16 attr background clip; 1.17 attr background origin; 1.18 attr background size; 1.19 attr border; 1.20 attr border bottom; 1.21 attr border bottom color; 1.22 attr border bottom style; 1.23 attr border bottom width; 1.24 attr border color; 1.25 attr border left; 1.26 attr border left color; 1.27 attr border left style; 1.28 attr border left width; 1.29 attr border right; 1.30 attr border right color; 1.31 attr border right style; 1.32 attr border right width; 1.33 attr border style; 1.34 attr border top; 1.35 attr border top color; 1.36 attr border top style; 1.37 attr border top width; 1.38 attr border width; 1.39 attr outline; 1.40 attr outline color; 1.41 attr outline style; 1.42 attr outline width; 1.43 attr border bottom left radius; 1.44 attr border bottom right radius; 1.45 attr border image; 1.46 attr border image outset; 1.47 attr border image repeat; 1.48 attr border image slice; 1.49 attr border image source; 1.50 attr border image width; 1.51 attr border radius; 1.52 attr border top left radius; 1.53 attr border top right radius; 1.54 attr box shadow; 1.55 attr overflow x; 1.56 attr overflow y; 1.57 attr overflow style; 1.58 attr rotation; 1.59 attr rotation point; 1.60 attr opacity; 1.61 attr padding; 1.62 attr padding bottom; 1.63 attr padding left; 1.64 attr padding right; 1.65 attr padding top; 1.66 attr height; 1.67 attr max height; 1.68 attr max width; 1.69 attr min height; 1.70 attr min width; 1.71 attr width; 1.72 attr flex; 1.73 attr flex grow; 1.74 attr flex shrink; 1.75 attr flex basis; 1.76 attr flex flow; 1.77 attr flex direction; 1.78 attr flex wrap; 1.79 attr align content; 1.80 attr align items; 1.81 attr align self; 1.82 attr justify content; 1.83 attr order; 1.84 attr box align; 1.85 attr box direction; 1.86 attr box flex; 1.87 attr box flex group; 1.88 attr box lines; 1.89 attr box ordinal group; 1.90 attr box orient; 1.91 attr box pack; 1.92 attr font; 1.93 attr font family; 1.94 attr font size; 1.95 attr font style; 1.96 attr font variant; 1.97 attr font weight; 1.98 attr font face; 1.99 attr font size adjust; 1.100 attr font stretch; 1.101 attr content; 1.102 attr counter increment; 1.103 attr counter reset; 1.104 attr quotes; 1.105 attr grid columns; 1.106 attr grid rows; 1.107 attr target; 1.108 attr target name; 1.109 attr target new; 1.110 attr target position; 1.111 attr list style; 1.112 attr list style image; 1.113 attr list style position; 1.114 attr list style type; 1.115 attr margin; 1.116 attr margin bottom; 1.117 attr margin left; 1.118 attr margin right; 1.119 attr margin top; 1.120 attr column count; 1.121 attr column fill; 1.122 attr column gap; 1.123 attr column rule; 1.124 attr column rule color; 1.125 attr column rule style; 1.126 attr column rule width; 1.127 attr column span; 1.128 attr column width; 1.129 attr columns; 1.130 attr bottom; 1.131 attr clear; 1.132 attr clip; 1.133 attr cursor; 1.134 attr display; 1.135 attr float; 1.136 attr left; 1.137 attr overflow; 1.138 attr position; 1.139 attr right; 1.140 attr top; 1.141 attr visibility; 1.142 attr z index; 1.143 attr page break after; 1.144 attr page break before; 1.145 attr page break inside; 1.146 attr border collapse; 1.147 attr border spacing; 1.148 attr caption side; 1.149 attr empty cells; 1.150 attr table layout; 1.151 attr color; 1.152 attr direction; 1.153 attr letter spacing; 1.154 attr line height; 1.155 attr text align; 1.156 attr text decoration; 1.157 attr text indent; 1.158 attr text transform; 1.159 attr vertical align; 1.160 attr white space; 1.161 attr word spacing; 1.162 attr text emphasis; 1.163 attr hanging punctuation; 1.164 attr punctuation trim; 1.165 attr text align last; 1.166 attr text justify; 1.167 attr text outline; 1.168 attr text overflow; 1.169 attr text shadow; 1.170 attr text wrap; 1.171 attr word break; 1.172 attr word wrap; 1.173 attr transform; 1.174 attr transform origin; 1.175 attr transform style; 1.176 attr perspective; 1.177 attr perspective origin; 1.178 attr backface visibility; 1.179 attr transition; 1.180 attr transition property; 1.181 attr transition duration; 1.182 attr transition timing function; 1.183 attr transition delay; 1.184 attr appearance; 1.185 attr box sizing; 1.186 attr icon; 1.187 attr nav down; 1.188 attr nav index; 1.189 attr nav left; 1.190 attr nav right; 1.191 attr nav up; 1.192 attr outline offset; 1.193 attr resize; 1.194 sel class; 1.195 sel id; 1.196 sel all; 1.197 sel element; 1.198 sel element comma; 1.199 sel element element; 1.200 sel element gt; 1.201 sel element plus; 1.202 sel attribute; 1.203 sel attribute value; 1.204 sel attribute value contains; 1.205 sel attribute value lang; 1.206 sel link; 1.207 sel visited; 1.208 sel active; 1.209 sel hover; 1.210 sel focus; 1.211 sel first letter; 1.212 sel first line; 1.213 sel first child; 1.214 sel before; 1.215 sel after; 1.216 sel lang; 1.217 sel gen sibling; 1.218 sel attr begin; 1.219 sel attr end; 1.220 sel attr contain; 1.221 sel first of type; 1.222 sel last of type; 1.223 sel only of type; 1.224 sel only child; 1.225 sel nth child; 1.226 sel nth last child; 1.227 sel nth of type; 1.228 sel nth last of type; 1.229 sel last child; 1.230 sel root; 1.231 sel empty; 1.232 sel target; 1.233 sel enabled; 1.234 sel disabled; 1.235 sel checked; 1.236 sel not; 1.237 sel selection; 1.238 sel out of range; 1.239 sel in range; 1.240 sel read write; 1.241 sel read only; 1.242 sel optional; 1.243 sel required; 1.244 sel valid; 1.245 sel invalid; 1.246 func attr; 1.247 func calc; 1.248 func cubic bezier; 1.249 func hsl; 1.250 func hsla; 1.251 func linear gradient; 1.252 func radial gradient; 1.253 func repeating linear gradient; 1.254 func repeating radial gradient; 1.255 func rgb; 1.256 func rgba; 1.257 func var; 1.258 keyword initial; 1.259 keyword inherit; 1.260 attr unicode bidi; 1.261 attr animation fill mode; 1.262 attr filter; 1.263 attr media query; 1.264 attr text decoration color; 1.265 attr text decoration line; 1.266 attr text decoration style; 1.267 attr tab size

第1章第249节 func hsl

教程阅读运行代码

CSS hsl() 函数

实例

定义 HSL 颜色：

#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%);} /* 浅绿  */
#p3 {background-color:hsl(120,100%,25%);} /* 暗绿  */
#p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */

定义与用法

hsl() 函数使用色相、饱和度、亮度来定义颜色。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。

HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。

支持版本：CSS3

浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

函数	Chrome	IE	Firefox	Safari	Opera
hsl()	1.0	9.0	1.0	3.1	9.5

CSS 语法

hsl(hue, saturation, lightness)

值	描述
hue - 色相	定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度	定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度	定义亮度 0% 为暗, 50% 为普通, 100% 为白

上一节下一节>