CSS3 rgb and rgba（透明色）的使用详解

以下是关于“CSS3 rgb 和 rgba（透明色）的使用详解”的完整攻略。

一、什么是rgb和rgba

RGB 和 RGBA 是一组颜色模式，RGB 表示红色、绿色和蓝色，RGBA 跟 RGB 模式同样表示红色、绿色和蓝色，只不过多了一个透明度的参数。

• RGB：由红色值（R）、绿色值（G）和蓝色值（B）组成的颜色表示方式。
• RGBA：由红色值（R）、绿色值（G）、蓝色值（B）和透明度（A）组成的颜色表示方式。

二、rgb和rgba的使用方法

1. RGB和RGBA常规用法

在CSS中，可以使用 RGB 或 RGBA 函数为元素指定颜色，如下示例：

• RGBA实例：

p {
  color: rgba(0, 0, 0, 0.5);
}

• RGB实例：

p {
  color: rgb(255, 0, 0);
}

2. RGB和RGBA的应用实例

在CSS3中，RGB 和 RGBA 也常常用于指定渐变和阴影等属性。下面我们来看两个实例：

1. 渐变应用示例：

background: rgb(255, 255, 255); /* 白色背景，兼容性好 **/
background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 应用渐变，135deg为角度方向 **/

2. 阴影应用示例：

box-shadow: 10px 10px 9px -10px rgba(0,0,0,0.5); /* 指定阴影效果，水平方向10px，竖直方向10px，阴影模糊级别为9px，阴影颜色为黑色，透明度为0.5 **/

三、总结

这篇攻略中我们讲述了 RGB 和 RGBA 的基本概念、使用方法以及常见的应用实例，大家可以通过这篇攻略更好地应用 RGB 和 RGBA 改善自己网站的样式。