先上圖，所謂有圖有真相。

如果您覺(jué)得圖片上這些按鈕不夠2.0，那沒(méi)辦法，請(qǐng)回避吧！

從圖片中，我們可以看到，我們要解決如下幾個(gè)問(wèn)題：

1. 背景色漸變
2. 圓角框
3. 陰影效果

就目前而言，要實(shí)現(xiàn)如上的效果，我們可以通過(guò)使用PNG圖片來(lái)實(shí)現(xiàn)，但熟悉的人都知道，要做出這樣的效果來(lái)，還是需要花費(fèi)很多的經(jīng)力的。更何況還要畫(huà)出這么多種配色（感謝一下辛苦的前臺(tái)工程師們）。

接下來(lái)，就讓我們看下使用CSS(主要是CSS3)怎么來(lái)做吧。

一、背景色漸變

我們首先來(lái)解決第一個(gè)問(wèn)題，背景色漸變。CSS3是支持背景色漸變的。對(duì)于在Firefox 3.6里面使用背景色漸變，可以參考以下一下這個(gè)網(wǎng)址:http://css-tricks.com/forums/viewtopic.php?f=8&t=3998，而WebKit引擎的可以參考這個(gè)：http://webkit.org/blog/175/introducing-css-gradients/。但在此處，我還將用比較傳統(tǒng)的方式來(lái)實(shí)現(xiàn)。經(jīng)常，我們會(huì)畫(huà)一些漸變的圖片來(lái)做背景，如圖：

然后我們可以使用css設(shè)置background-image來(lái)實(shí)現(xiàn)漸變，而對(duì)于懸停(hover)，則可通過(guò)設(shè)置background-position來(lái)實(shí)現(xiàn)。但這樣我們會(huì)發(fā)現(xiàn)，但需要大量的配色時(shí)，要畫(huà)出這一張張的圖片來(lái)，還是一件比較耗體力的事（就算你的Photoshop里面存了一大堆這樣的樣式）。

仔細(xì)一想,其實(shí)這種漸變顏色基調(diào)往往都是一致的,而且往往是從較亮的顏色變到次亮點(diǎn)的顏色(我相信不會(huì)有人會(huì)要一個(gè)藍(lán)變到紅的按鈕)。那么，我們想，既然是從亮變到暗，而且顏色基調(diào)一致，這不就和我們生活中把光從頂部往下照到一塊純色的布上的效果是一樣的嘛。那么，如何模擬這種效果呢？很簡(jiǎn)單，畫(huà)一張從白色到透明漸變的圖往一個(gè)純色的區(qū)域上一罩不就OK啦。PhotoShop中的漸變圖：

CSS如下:

.orange{
    background: #FF5C00 url(images/light-overlay.png) repeat-x scroll 0 0;
}
.orange:hover {
    background-color: #D45500;
}

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表