CSS3顏色 RGBA 漸變色彩

2021-07-24 12:52:02 字數 1007 閱讀 3633

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);
效果圖:

CSS3中顏色漸變色彩

css3 gradient分為線性漸變 linear 和徑向漸變 radial 由於不同的渲染引擎實現漸變的語法不同,這裡我們只針對線性漸變的 w3c 標準語法來分析其用法,其餘大家可以查閱相關資料。w3c 語法已經得到了 ie10 firefox19.0 chrome26.0 和 opera12....

CSS3漸變色彩

css3 gradient 分為線性漸變 linear 和徑向漸變 radial 首先來了解下線性漸變的語法 第二個和第三個引數,表示顏色的起始點和結束點,可以有多個顏色值,如 或者是 接下來我們來看一下複雜點的徑向漸變,語法 background radial gradient position ...

CSS3漸變色按鈕

下面的展示的是不同的瀏覽器的不同的顯示效果。下面的 是類.button 的一般樣式。為了基於字型大小變化而能自由伸縮,我在填充 padding 和邊界半徑border radius時用了em值。要調整圓角和按鈕的大小,簡單地改變邊界半徑,字型大小和填充值。比如 我可以通過減小字型大小 font si...