2012-07-21 81 views
-3

我有以下按鈕:按鈕在HTML/CSS

enter image description here

我需要使用HTML/CSS3做到這一點。我已經嘗試了很多東西,如徑向漸變。

我已經試過-webkit-梯度(線性..和-webkit-梯度(徑向...

任何幫助或想法?

+2

你可以給你試過的代碼嗎?此外,背景可能更容易與圖像做。 – 2012-07-21 19:08:33

+0

爲什麼你需要*用CSS來做到這一點? – Dennis 2012-07-21 19:09:14

+1

我需要用CSS來做,因爲我們正在優化代碼,它需要更快。 – Tony 2012-07-21 19:09:47

回答

-1

使用CSS,我能得到的最接近只是一個線性漸變,從上到下,底部的一點點光線很難做到CSS,你可能需要考慮一個圖像,如果它不是很大,不會影響性能太多,

你可能會想要看你的服務器端編碼的性能,因爲這是大多數時候的問題。如果這是因爲你需要加載大量的圖像,你可以得到所有的ima ges放在你的網站上,並把它放在一個文件中,並且總是得到那個文件,但是具有不同的背景位置。 StackOverflow也使用它。這種技術被稱爲使用sprites

指南在做什麼,它是如何工作可以在這裏找到:CSS Tricks: Sprites

這是我得到的最接近:http://jsfiddle.net/DU3QJ/

2

Here's an attempt at it:

div { 
    background-image:-moz-radial-gradient(50% 100%, yellow, #FFCC00, yellow); 
    background-image:-webkit-radial-gradient(50% 100%, yellow, #FFCC00, yellow); 
    background-image: radial-gradient(50% 100%, yellow, #FFCC00, yellow); 
    height:47px; 
    width:202px; 
    border-radius:5px; 
    text-align:center; 
    line-height:47px; 
    font-weight:bold; 
    font-family: sans-serif; 
    color:#AA8100; 
} 
0

徑向漸變只用圓形或橢圓形,所以你將無法得到這種風格沒有圖像或一些CSS畫布...