CSS hsl() ပုံစံ

ဒေါ်လုပ်ခြင်း နှင့် အသုံးပြုခြင်း

CSS အဖြူအရောင် hsl() ပုံစံ hsl() ပုံစံ သည် အဖြူအရောင်၏ အသုံးပြုသူ-အကျယ်အဝန်း-အရောင်သုံး ပုံစံ (HSL) ကို သုံးစွဲသည်။ အဖြူအရောင်၏ အမြောက်အမြန် (alpha) အစိတ်အစိတ် ကို ထပ်ပေါင်းနိုင်ပါသည်။

အကြောင်းကြားချက်:HSL သည် အဖြူအရောင်၏ အသုံးပြုသူ (Hue)、အကျယ်အဝန်း (Saturation) နှင့် အရောင်သုံး (Lightness) ကို ကိုက်ညီသည်။ အဖြူအရောင်၏ အာရုံကြောင်းအရာများကို ကိုက်ည�သည်။

အကြောင်းကြားချက်:hsla() ပုံစံ သည် hsl() ပုံစံ၏ အမည်ပုံ。 hsl() ပုံစံ。

အကျိုးသုံး

အမှတ် 1

အမျိုးမျိုးသော HSL(A) အဖြူအရောင် ကို ဒေါ်လုပ်ပါ:

#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 100% 25% / 20%);} /* ပြည့်သောအဖြူအရောင်အရောင်ပြတ် */
#p5 {background-color:hsl(120 60% 70%);} /* ပြည့်သောအဖြူအရောင် */
#p6 {background-color:hsl(290 100% 50%);} /* အဖြူအရောင် */
#p7 {background-color:hsl(290 60% 70%);} /* ပြည့်သောအဖြူအရောင်အရောင် */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* ပြည့်သောအဖြူအရောင်အရောင်ပြတ် */

#p5 {background-color:hsl(290, 100%, 50%);} /* အပိုးအခြား အရောင် */

例子 2

使用逗号分隔值的旧语法：

အကွက်ဖြင့် အပြည့်အထွော့ ဘာသာစကား
အကွက်ဖြင့် အပြည့်အထွော့ ဘာသာစကား
#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%);} /* အေးချမ်းသော အပိုးအခြား အရောင် */

#p5 {background-color:hsl(290, 100%, 50%);} /* အပိုးအခြား အရောင် */

#p6 {background-color:hsl(290, 60%, 70%);} /* အေးချမ်းသော အပိုးအခြား အရောင် */

ကျွန်ုပ်ကိုယ် ကြိုးစားမှု

CSS ဘာသာစကားhue saturation lightness / Aအတိုင်းအတာ ဘာသာစကား

အတိုင်းအတာ ဘာသာစကား

hsl( ဖော်ထုတ် hue saturation lightness / Aအတိုင်းအတာ ဘာသာစကား

နည်းပါး အချက်အလက်

ဘာသာစကား အထောက်အပံ့

စာရင်းအရ ဖော်ထုတ်ထားသော စာကြိုးကြီး ကို ပြောဆိုသည်။

ပါဝင်သော စာမျက်နှာ

ပြည်ထောင်စုံကြီး:CSS HSL အရောင်

参考：CSS အရောင်

参考：CSS hwb() ပုံစံ

参考：CSS lab() ပုံစံ

参考：CSS lch() ပုံစံ

参考：CSS oklab() 函数

参考：CSS oklch() 函数