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 超出範...