【CSS3】---顏色RGBA及漸變色


顏色之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+等瀏覽器的支持。

這一小節我們來說一下線性漸變:

 

參數:

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

(單擊圖片可放大)

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

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

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

效果圖:

 例子
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">

p {
  width: 400px;
  height: 150px;
  line-height: 150px;
  text-align:center;
  color: #000;
  font-size:24px;
  background-image:linear-gradient(to top left,red,green,blue,yellow,black,white);
} 
</style>
</head> 
<body>
  <p>右下角向左上角的線性漸變背景</p>
</body>
</html>

效果:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM