圖像中的CSS漸變

我已經從我的廣告部門獲得了一些圖像，以便將它放在網站上用於製表符等。但是我相信這會降低頁面的渲染速度。所以我想我會在CSS中做到這一點。但是經過幾次試驗後，我無法接近以下圖像。我將不勝感激任何幫助這兩個圖像。圖像中的CSS漸變

刪除這個問題，請 我想我將不得不在這個工作，然後轉發，如果我弄不清楚的東西。可以請你在關閉這個問題投票謝謝

2012-02-19 Autolycus

實際上，渲染可能會更快。不過，下載速度會比較慢。 – Ryan 2012-02-19 20:50:11

你能顯示你當前的代碼嗎？沒有它，你要求我們發佈一個完整的結構，包括樣式。這有點多，不是嗎？ – 2012-02-19 20:51:01

兩個hexcodes對於頂部和底部的顏色是＃FF7F00和＃ED3400，分別。然後，您可以使用link that Chad von Nau provided並適當地編輯邊框，舍入和文字。

這是我爲你的形象想出來的。

<style type="text/css"> 
classname{ 
    -moz-box-shadow:inset 0px 1px 0px 0px #db8f4c; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #db8f4c; 
    box-shadow:inset 0px 1px 0px 0px #db8f4c; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff8000), color-stop(1, #ed3300)); 
    background:-moz-linear-gradient(center top, #ff8000 5%, #ed3300 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8000', endColorstr='#ed3300'); 
    background-color:#ff8000; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#ffffff; 
    font-family:arial; 
    font-size:21px; 
    font-weight:bold; 
    padding:11px 54px; 
    text-decoration:none; 
    text-shadow:-1px -1px 0px #ed3300; 
}.classname:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ed3300), color-stop(1, #ff8000)); 
    background:-moz-linear-gradient(center top, #ed3300 5%, #ff8000 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed3300', endColorstr='#ff8000'); 
    background-color:#ed3300; 
}.classname:active { 
    position:relative; 
    top:1px; 
} 
</style>

來源

2012-02-19 20:57:39 PenguinKenny

試試這個：http://www.cssbuttongenerator.com/

來源

2012-02-19 20:51:45

圖像中的CSS漸變

回答

相關問題