CSS風格跨度類

Question

我在網站上找到了跨度類的相當酷的風格，但我無法弄清楚它是如何創建的。我看了一下css文件，這是我認爲代碼的地方。有沒有人見過這種風格或使用過它？我真的很想知道如何重新創建這種效果。

，我一直在尋找的代碼在下列

<p> 
<span class="new">New</span> 
</p> 

任何幫助，將不勝感激

Answer 1

我可以生產您需要的CSS代碼：

span.new { 

padding-right:5px;  
padding-left: 25px; 

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 

/* Next 6 lines do the same thing but they are used to prevent compatibility issiues in different browsers */ 
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #EFA718 100%); 
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #EFA718 100%); 
background-image: -o-linear-gradient(left, #FFFFFF 0%, #EFA718 100%); 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #EFA718)); 
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #EFA718 100%); 
background-image: linear-gradient(to right, #FFFFFF 0%, #EFA718 100%); 
} 

你可以從http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/ 幫助和它玩。

Answer 2

他們使用，他們使用Photoshop和剛剛設置可能產生的圖像該圖像作爲跨度的背景。

span{ 
    background: url('path to image') repeat-none left; 
} 

，或者因爲他們使用的是css3 gradients