opacity透明度
语法
div{opacity:数值;}
- opacity属性的取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。
- opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。
RGBA颜色
RGB是一种色彩标准，由红（Red）、绿（Green）、蓝（Blue）3种颜色变化来得到各种颜色。而RGBA是在RGB基础上增加了一个透明度通道Alpha。
语法
div{background-color:rgba(R, G, B, A)；}
div{background-color:rgba(255, 255, 0, 0.5)；}
div{background-color:rgba(50%, 80%, 50%, 0.5)；}
R，指的是红色值（Red）；G，指的是绿色值（Green）；B，指的是蓝色值（Blue）；A，指的是透明度（Alpha）。R、G、B这三个参数可以为整数，取值范围为0~255，也可以为百分比，取值范围为0%~100%。参数A为透明度，跟opacity属性是一样的，取值范围为0.0~1.0。
渐变
线性渐变linear-gradient
语法
div{background:linear-gradient(方向, 开始颜色, 结束颜色)；}
线性渐变的"方向"取值有两种:
- 一种是使用角度（单位为deg）
- 另一种是使用关键字
|--------------|----------|---------------|
| 线性渐变的"方向"取值 |||
| 属性值 | 对应角度 | 说明 |
| to top | 0deg | 从下到上 |
| to bottom | 180deg | 从上到下(默认值) |
| to left | 270deg | 从右到左 |
| to right | 90deg | 从左到右 |
| to top left | 无 | 从右下角到左上角(斜对角) |
| to top right | 无 | 从左下角到右上角(斜对角) |
线性渐变也可以接受一个"值列表"，用于同时定义多种颜色的线性渐变，颜色值之间用英文逗号隔开即可。
径向渐变radial-gradient
语法
div{background:radial-gradient(position, shape size, start-color, stop-color)；}
div{background:radial-gradient((center, orange, blue))；}
- position用于定义圆心位置。shape size用于定义形状大小，由两部分组成，shape定义形状，size定义大小。start-color和stop-color分别用于定义开始颜色和结束颜色。
- 其中，position和shape size都是可选参数。如果省略，则表示采用默认值。start-color和stop-color都是必选参数，可以有多个颜色值。
圆心位置position
position常用取值有两种：一种是"长度值"（如10px），另一种是"关键字"
|---------------|--------|
| 属性值 | 说明 |
| center | 中部(默认值 |
| top | 顶部 |
| bottom | 底部 |
| left | 左部 |
| right | 右部 |
| top center | 靠上居中 |
| top left | 左上 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
形状 shape size
|---------|---------|
| 参数shape取值 ||
| 属性值 | 说明 |
| ellipse | 圆形(默认值) |
| circle | 圆形 |
|-----------------|-------------------------|
| 参数size取值 ||
| 属性值 | 说明 |
| closet-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| closet-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
开始颜色start-color，结束颜色stop-color
径向渐变可以接受一个"值列表"，用于同时定义多种颜色的径向渐变。
默认情况下，径向渐变的颜色节点是均匀分布的，不过我们可以为每一种颜色添加百分比，从而使得各个颜色节点不均匀分布。
语法
div{background:radial-gradient(red 5%,green 30%,blue 60%)；}