css设置颜色值得几种用法
1. 颜色名（red）16进制（#ccc）
2.rgb(128,128,128)
3.hsl(330,50%,50%) 色度 饱和度 亮度
4.rgba hsla 同上面用法a（0-1）表示透明度（330,50%,50%，0.5）
5.transparent 用来指定全透明色彩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
display: flex;
flex-wrap: wrap;
}
.div1{
/* 1.HEX */
background-color: #ccc;
/* background-color: gray; */
}
.div2{
/* 2.RGB */
/* R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数 */
background-color: rgb(128, 128, 128);
}
.div3{
/* 3.HSL */
/* H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0% */
background-color: hsl(330, 20%, 50%);
}
.div4{
/* 4.RGBA */
/* A：
Alpha透明度。取值0~1之间。 */
background-color: rgb(128, 128, 128,0.5);
}
.div5{
/* 5.HSLA */
background-color: hsl(330, 20%, 50%,0.5) ;
}
.div6{
/* 6.transparent 用来指定全透明色彩。*/
/* color: transparent; */
border: 1px solid transparent;
background: transparent;
/* opacity: 0; */
}
.div7{
/* 7.currentColor*/
border: 1px solid;
color: red;
}
</style>
</head>
<body>
<div class="div1" style="width: 200px;height: 200px">div1 HEX #ccc</div>
<div class="div2" style="width: 200px;height: 200px">div2 RGB</div>
<div class="div3" style="width: 200px;height: 200px">div3 HSL</div>
<div class="div4" style="width: 200px;height: 200px">div4 RGBA 透明度</div>
<div class="div5" style="width: 200px;height: 200px">div5 HSLA 透明度</div>
<div class="div6" style="width: 200px;height: 200px">div6 transparent 背景色全透明</div>
<div class="div7" style="width: 200px;height: 200px">div7 currentColor</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
