甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
本篇内容介绍了“CSS3的色彩模式有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
站在用户的角度思考问题，与客户深入沟通，找到梨林网站设计与梨林网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广、国际域名空间、雅安服务器托管、企业邮箱。业务覆盖梨林地区。
HSL色彩模式是工业界的一种颜色标准，它通过对色调（H），饱和度（S），亮度（L）三个颜色通道的改变以及他们相互之间的叠加来获得各种颜色。这个标准几乎包括了人类视力可以感知的所有颜色，在屏幕上可以重现16777216种颜色，是目前应用最广的颜色系统之一。
语法：
hsl（
参数说明：
实例：网页配色解决方案
XML/HTML Code复制内容到剪贴板
table {
border:solid 1px Orange;
background:#eee;
padding:6px;
}
th {
color:Orange;
font-size:12px;
font-weight:normal;
}
td {
width:80px;
height:30px;
}
/*第1行*/
tr:nth-child(4) td:nth-of-type(1) { background:hsl(30,100%,100%);}
tr:nth-child(4) td:nth-of-type(2) { background:hsl(30,75%,100%);}
tr:nth-child(4) td:nth-of-type(3) { background:hsl(30,50%,100%);}
tr:nth-child(4) td:nth-of-type(4) { background:hsl(30,25%,100%);}
tr:nth-child(4) td:nth-of-type(5) { background:hsl(30,0%,100%);}
/*第2行*/
tr:nth-child(5) td:nth-of-type(1) { background:hsl(30,100%,88%);}
tr:nth-child(5) td:nth-of-type(2) { background:hsl(30,75%,88%);}
tr:nth-child(5) td:nth-of-type(3) { background:hsl(30,50%,88%);}
tr:nth-child(5) td:nth-of-type(4) { background:hsl(30,25%,88%);}
tr:nth-child(5) td:nth-of-type(5) { background:hsl(30,0%,88%);}
/*第3行*/
tr:nth-child(6) td:nth-of-type(1) { background:hsl(30,100%,75%);}
tr:nth-child(6) td:nth-of-type(2) { background:hsl(30,75%,75%);}
tr:nth-child(6) td:nth-of-type(3) { background:hsl(30,50%,75%);}
tr:nth-child(6) td:nth-of-type(4) { background:hsl(30,25%,75%);}
tr:nth-child(6) td:nth-of-type(5) { background:hsl(30,0%,75%);}
/*第4行*/
tr:nth-child(7) td:nth-of-type(1) { background:hsl(30,100%,63%);}
tr:nth-child(7) td:nth-of-type(2) { background:hsl(30,75%,63%);}
tr:nth-child(7) td:nth-of-type(3) { background:hsl(30,50%,63%);}
tr:nth-child(7) td:nth-of-type(4) { background:hsl(30,25%,63%);}
tr:nth-child(7) td:nth-of-type(5) { background:hsl(30,0%,63%);}
/*第5行*/
tr:nth-child(8) td:nth-of-type(1) { background:hsl(30,100%,50%);}
tr:nth-child(8) td:nth-of-type(2) { background:hsl(30,75%,50%);}
tr:nth-child(8) td:nth-of-type(3) { background:hsl(30,50%,50%);}
tr:nth-child(8) td:nth-of-type(4) { background:hsl(30,25%,50%);}
tr:nth-child(8) td:nth-of-type(5) { background:hsl(30,0%,50%);}
/*第6行*/
tr:nth-child(9) td:nth-of-type(1) { background:hsl(30,100%,38%);}
tr:nth-child(9) td:nth-of-type(2) { background:hsl(30,75%,38%);}
tr:nth-child(9) td:nth-of-type(3) { background:hsl(30,50%,38%);}
tr:nth-child(9) td:nth-of-type(4) { background:hsl(30,25%,38%);}
tr:nth-child(9) td:nth-of-type(5) { background:hsl(30,0%,38%);}
/*第7行*/
tr:nth-child(10) td:nth-of-type(1) { background:hsl(30,100%,25%);}
tr:nth-child(10) td:nth-of-type(2) { background:hsl(30,75%,25%);}
tr:nth-child(10) td:nth-of-type(3) { background:hsl(30,50%,25%);}
tr:nth-child(10) td:nth-of-type(4) { background:hsl(30,25%,25%);}
tr:nth-child(10) td:nth-of-type(5) { background:hsl(30,0%,25%);}
/*第8行*/
tr:nth-child(11) td:nth-of-type(1) { background:hsl(30,100%,13%);}
tr:nth-child(11) td:nth-of-type(2) { background:hsl(30,75%,13%);}
tr:nth-child(11) td:nth-of-type(3) { background:hsl(30,50%,13%);}
tr:nth-child(11) td:nth-of-type(4) { background:hsl(30,25%,13%);}
tr:nth-child(11) td:nth-of-type(5) { background:hsl(30,0%,13%);}
/*第9行*/
tr:nth-child(12) td:nth-of-type(1) { background:hsl(30,100%,0%);}
tr:nth-child(12) td:nth-of-type(2) { background:hsl(30,75%,0%);}
tr:nth-child(12) td:nth-of-type(3) { background:hsl(30,50%,0%);}
tr:nth-child(12) td:nth-of-type(4) { background:hsl(30,25%,0%);}
tr:nth-child(12) td:nth-of-type(5) { background:hsl(30,0%,0%);}