效果一、顏色之RGBA

RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。

語法：

color：rgba(R,G,B,A)

以上R、G、B三個參數，正整數值的取值范圍為：0 - 255。百分數值的取值范圍為：0.0% - 100.0%。超出范圍的數值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數值。A為透明度參數，取值在0~1之間，不可為負值。

代碼示例：

background-color:rgba(100,120,60,0.5);

效果二、漸變色彩

CSS3?Gradient?分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實現漸變的語法不同，這里我們只針對線性漸變的 W3C 標準語法來分析其用法，其余大家可以查閱相關資料。W3C 語法已經得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

這一小節(jié)我們來說一下線性漸變：

?

參數：

第一個參數:指定漸變方向，可以用“角度”的關鍵詞或“英文”來表示：

（單擊圖片可放大）

第一個參數省略時，默認為“180deg”，等同于“to?bottom”。

第二個和第三個參數，表示顏色的起始點和結束點，可以有多個顏色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果圖：

以上內容參考于慕課網教程：https://www.imooc.com/code/617

?

總結

以上是生活随笔為你收集整理的CSS3笔记之基础篇（二）颜色和渐变色彩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。