CSS样式的Span类

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