CSS新手入门笔记整理：CSS3颜色样式

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%)；}

---