當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

【CSS3】填色表格演示hsl()

發(fā)布時間：2025/3/15 CSS 40 豆豆

生活随笔收集整理的這篇文章主要介紹了【CSS3】填色表格演示hsl() 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

示例圖

網(wǎng)頁源碼

<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"><title>hsl表格</title><style type="text/css">table {border:solid 1px red;background:#eee;padding:6px;}th {color:red;font-size:12px;font-weight:normal;}td {width:80px;height:30px;}tr:nth-child(4) td:nth-of-type(1) { background:hsl(0,100%,100%);}tr:nth-child(4) td:nth-of-type(2) { background:hsl(0,75%,100%);}tr:nth-child(4) td:nth-of-type(3) { background:hsl(0,50%,100%);}tr:nth-child(4) td:nth-of-type(4) { background:hsl(0,25%,100%);}tr:nth-child(4) td:nth-of-type(5) { background:hsl(0,0%,100%);}tr:nth-child(5) td:nth-of-type(1) { background:hsl(0,100%,88%);}tr:nth-child(5) td:nth-of-type(2) { background:hsl(0,75%,88%);}tr:nth-child(5) td:nth-of-type(3) { background:hsl(0,50%,88%);}tr:nth-child(5) td:nth-of-type(4) { background:hsl(0,25%,88%);}tr:nth-child(5) td:nth-of-type(5) { background:hsl(0,0%,88%);}tr:nth-child(6) td:nth-of-type(1) { background:hsl(0,100%,75%);}tr:nth-child(6) td:nth-of-type(2) { background:hsl(0,75%,75%);}tr:nth-child(6) td:nth-of-type(3) { background:hsl(0,50%,75%);}tr:nth-child(6) td:nth-of-type(4) { background:hsl(0,25%,75%);}tr:nth-child(6) td:nth-of-type(5) { background:hsl(0,0%,75%);}tr:nth-child(7) td:nth-of-type(1) { background:hsl(0,100%,63%);}tr:nth-child(7) td:nth-of-type(2) { background:hsl(0,75%,63%);}tr:nth-child(7) td:nth-of-type(3) { background:hsl(0,50%,63%);}tr:nth-child(7) td:nth-of-type(4) { background:hsl(0,25%,63%);}tr:nth-child(7) td:nth-of-type(5) { background:hsl(0,0%,63%);}tr:nth-child(8) td:nth-of-type(1) { background:hsl(0,100%,50%);}tr:nth-child(8) td:nth-of-type(2) { background:hsl(0,75%,50%);}tr:nth-child(8) td:nth-of-type(3) { background:hsl(0,50%,50%);}tr:nth-child(8) td:nth-of-type(4) { background:hsl(0,25%,50%);}tr:nth-child(8) td:nth-of-type(5) { background:hsl(0,0%,50%);}tr:nth-child(9) td:nth-of-type(1) { background:hsl(0,100%,38%);}tr:nth-child(9) td:nth-of-type(2) { background:hsl(0,75%,38%);}tr:nth-child(9) td:nth-of-type(3) { background:hsl(0,50%,38%);}tr:nth-child(9) td:nth-of-type(4) { background:hsl(0,25%,38%);}tr:nth-child(9) td:nth-of-type(5) { background:hsl(0,0%,38%);}tr:nth-child(10) td:nth-of-type(1) { background:hsl(0,100%,25%);}tr:nth-child(10) td:nth-of-type(2) { background:hsl(0,75%,25%);}tr:nth-child(10) td:nth-of-type(3) { background:hsl(0,50%,25%);}tr:nth-child(10) td:nth-of-type(4) { background:hsl(0,25%,25%);}tr:nth-child(10) td:nth-of-type(5) { background:hsl(0,0%,25%);}tr:nth-child(11) td:nth-of-type(1) { background:hsl(0,100%,13%);}tr:nth-child(11) td:nth-of-type(2) { background:hsl(0,75%,13%);}tr:nth-child(11) td:nth-of-type(3) { background:hsl(0,50%,13%);}tr:nth-child(11) td:nth-of-type(4) { background:hsl(0,25%,13%);}tr:nth-child(11) td:nth-of-type(5) { background:hsl(0,0%,13%);}tr:nth-child(12) td:nth-of-type(1) { background:hsl(0,100%,0%);}tr:nth-child(12) td:nth-of-type(2) { background:hsl(0,75%,0%);}tr:nth-child(12) td:nth-of-type(3) { background:hsl(0,50%,0%);}tr:nth-child(12) td:nth-of-type(4) { background:hsl(0,25%,0%);}tr:nth-child(12) td:nth-of-type(5) { background:hsl(0,0%,0%);}</style></head><body><table class="hsl"><tbody><tr><th> </th><th colspan="5">色相：H=0 Red </th></tr><tr><th> </th><th colspan="5">飽和度 (→)</th></tr><tr><th>亮度 (↓)</th><th>100% </th><th>75% </th><th>50% </th><th>25% </th><th>0% </th></tr><tr><th>100 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>88 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>75 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>63 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>50 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>38 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>25 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>13 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><th>0 </th><td> </td><td> </td><td> </td><td> </td><td> </td></tr></tbody></table></body> </html>

總結(jié)

以上是生活随笔為你收集整理的【CSS3】填色表格演示hsl()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：洛谷P1116题解（Java语言描述）
下一篇：算算奖学金（洛谷P1051题题解，Jav