1.直接用颜色:red、blue、green
2.用rgb表示:rgb(255,255,255)
3.用十六进制表示:
00表示0%,FF表示100%,
如 color:#007F00
.red {
background-color: rgb(255, 0, 0);
}
.green {
background-color: #007F00;
}
4.hsl函数表示:
0~360表示色调,0~100的百分比表示饱和度,0~100的百分比表示亮度
色调:红色——0度,绿色——120度,蓝色——240度
.blue {
background-color: hsl(240, 100%, 50%);
}
5.linear-gradient函数
linear-gradient(gradientDirection,color1,color2......)
gradientDirection表明过渡线的方向,color1是颜色参数(可以是颜色关键字或者十六进制等上面提到的表示方式)
.red {
background: linear-gradient(90deg, rgb(255, 0, 0),rgb(0,255,0));
}
可以在颜色参数之后加上百分比颜色中间点
.red {
background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
}
6.添加阴影效果
box-shadow:offsetX offsetY blurRadius spreadRadius color;
offsetX 阴影横向偏移量
offsetY阴影纵向偏移量
blurRadius产生模糊效果
spreadRadius阴影影响范围
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
box-shadow: 0 0 20px 0 blue;
}