css笔记——颜色

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;
}