CSS3 線性漸變色

2021-10-02 05:57:13 字數 1703 閱讀 6659

linear-gradient()

background-color: red;

/* 瀏覽器不支援的時候顯示 */

background-image: linear-

gradient

(to right, red, orange, yellow, green, blue, indigo, violet)

;/* 標準的語法(必須放在最後) */

引數:

1、direction: 方向/ 角度

eg: to right/ to bottom right/ to bottom /

90deg

2、colorp01, color02...

......

.用於指定漸變的起止顏色

eg:

background-image: linear-

gradient

(to right bottom, red, orange, yellow, green)

;/* 標準的語法(必須放在最後) */

background-image: linear-

gradient

(60deg, red, orange, yellow, green)

;/* 標準的語法(必須放在最後) */

缺點:占用background-image屬性

-webkit-gradient

background:

-webkit-

gradient

(linear,left top,right bottom,

from

(green),to

(blue));

background-origin:content-box;

background-clip: content-box;

引數:

1、漸變色型別: linear 固定

2、x1, y1, x2,y2: 起始點/終點

eg: left, top, right, bottom

eg:0,

0,100%

,100

% eg:0,

0,0,

100%

3、from

(color),to

(color) :起始顏色, 終點顏色

4、color-stop01, color-stop02:color-stop 顏色的步長,就是增加了乙個漸變在50

%的地方

background:

-webkit-

gradient

(linear,left top,right bottom,

from

(green),to

(blue)

,color-

stop(50

%,yellow)

);

CSS3漸變色按鈕

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

CSS3漸變色彩

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

CSS3顏色 RGBA 漸變色彩

rgb是一種色彩標準,是由紅 r 綠 g 藍 b 的變化以及相互疊加來得到各式各樣的顏色。rgba是在rgb的基礎上增加了控制alpha透明度的引數。語法 color rgba r,g,b,a 以上r g b三個引數,正整數值的取值範圍為 0 255。百分數值的取值範圍為 0.0 100.0 超出範...