CSS中和颜色及渐变
CSS可以设置的颜色
颜色名称
transparent（全透明黑色） pink yellowgreen 等指定的颜色名称
16进制
#ABCDEF
| 参数 | 含义 | 范围 |
|---|---|---|
| AB | 红色渠道值 | 00-FF |
| CD | 绿色渠道值 | 00-FF |
| EF | 蓝色渠道值 | 00-FF |
RGB及RGBA
rgb(red, green, blue)
rgba(red, green, blue，alpha)
| 参数 | 含义 | 范围 |
|---|---|---|
| red | 红色渠道值 | 0-255 |
| green | 绿色渠道值 | 0-255 |
| blue | 蓝色渠道值 | 0-255 |
| alpha | 透明度 | 0-1 |
HSL及HSLA
hsl(hue, saturation, lightness)
hsl(hue, saturation, lightness,alpha)
| 参数 | 含义 | 范围 |
|---|---|---|
| hue | 色调 | 0(或360)表示红色，120表示绿色，240表示蓝色 |
| saturation | 饱和度 | 0.0% - 100.0% |
| lightness | 亮度 | 0.0% - 100.0% |
| alpha | 透明度 | 0-1 |
渐变
| 函数 | |
|---|---|
| linear-gradient | 线性渐变 |
| radial-gradient | 径向渐变 |
| conic-gradient | 圆锥渐变 |
linear-gradient
语法
linear-gradient( [positon || angle,] color-stop-list);
参数
| positon | 方向 |
|---|---|
| to bottom | 从上向下渐变（默认渐变方向） |
| to top | 从下向上渐变 |
| to left | 从右向左渐变 |
| to right | 从左向右渐变 |
| to positon1 positon2 | 向任意两个相邻方向组合方向渐变 |
| angle（指定任意方向） | 一圈的范围 |
|---|---|
| deg（角度） | 0deg - 360deg |
| grad（百分度） | 0grad-400grad |
| rad （弧度） | 0-2πrad （css不识别π） |
| turn（转） | 0-1turn |
无论是哪种单位，0的位置都是在下方，+为顺时针方向
| color-stop-list | 颜色列表 |
|---|---|
| color | 有效的颜色值 |
| stop | 终止位置（length or percentage） |
如果第一个颜色中间点没有 length 或 percentage属性,那么它默认为0%。如果最后一个颜色中间点没有 length 或者 percentage属性, 则默认为100%。
如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。
.line1 {
background: linear-gradient(90deg, #adf, pink, #adf);
}
.line2 {
background: linear-gradient(to right, #adf 0%, pink 50%, #adf 100%);
}
.line3 {
background: linear-gradient(100grad, #adf, pink 70%, #adf 100%);
}
.line4 {
background: linear-gradient(0.25turn,#adf 0%, 10%,pink 50%, 90%,#adf 100%); // 20%及90%是更改渐变中心，默认中心点是在两个颜色的终止位置之间。
}
radial-gradient
语法
radial-gradient([shape] [size] [at position], color-stop-list);
参数
| shape | 圆的类型 |
|---|---|
| ellipse | 指定椭圆形的径向渐变 |
| circle | 指定圆形的径向渐变 |
| size | 渐变的大小 |
|---|---|
| farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
| closest-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| closest-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| position | 渐变的位置 |
|---|---|
| center | 设置中间为径向渐变圆心的纵坐标值。 |
| top | 设置顶部为径向渐变圆心的纵坐标值 |
| bottom | 设置底部为径向渐变圆心的纵坐标值 |
| x,y | 设置有效值X,y为径向渐变圆心的横纵坐标值 |
color-stop-list 和线性渐变一致
radial-gradient
语法
conic-gradient([from angle] [at position], color-stop-list)
圆锥渐变的起始点是图形中心，渐变方向以顺时针方向绕中心旋转实现渐变效果。
| angle | 起始角度 |
|---|---|
TODO：更新浏览器后试试，目前不支持
