CSS3漸變色按鈕

2021-06-06 19:13:05 字數 779 閱讀 1649

下面的展示的是不同的瀏覽器的不同的顯示效果。

下面的**是類.button 的一般樣式。 為了基於字型大小變化而能自由伸縮,我在填充(padding)和邊界半徑border-radius時用了em值。要調整圓角和按鈕的大小,簡單地改變邊界半徑,字型大小和填充值。 比如:我可以通過減小字型大小(font-size)和填充值(padding values)做乙個更小的按鈕( demo

).更多有關 border-radius, text-shadow, and box-shadow的細節請閱讀css3的基礎知識

[ 英文原文 the basics of css3

] 。

.button 

.button:hover

.button:active

下面的**是橘黃色的css樣式。 第一行的background  是乙個備用,針對不支援css3 的瀏覽器, 第二行的background是為 webkit這類瀏覽器, 第三行的background是為firefox,最後一行是filter只被internet explorer識別。

更多關於 css gradient的細節,請看 cross-browser css gradient

.orange 

.orange:hover

.orange:active

比如你喜歡藍色的按鈕,並想應用在你的頁面:

翻譯後。這又是一篇關於css3的特性的文章,css3越來越流行,不得不學了啊,呵呵。希望對你能有用。

CSS3 線性漸變色

linear gradient background color red 瀏覽器不支援的時候顯示 background image linear gradient to right,red,orange,yellow,green,blue,indigo,violet 標準的語法 必須放在最後 引數 ...

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