CSS 样式跨度类

标签 css linear-gradients

我在网站上查找时发现了一个相当酷的 span 类样式,但我无法弄清楚它是如何创建的。我查看了 css 文件,这是我认为代码所在的位置。有没有人以前见过或使用过这种风格?我真的很想知道如何重新创建这种效果。

enter image description here

我正在查看的代码如下

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

任何帮助将不胜感激

最佳答案

我可以生成您需要的 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/获得帮助 并使用它。

关于CSS 样式跨度类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15714260/

相关文章:

javascript - 渐变线性CSS问题(附上plunker

css - 带圆 Angular 的线性渐变

javascript - Swiper 禁用左右半/部分滑动

尝试添加文本时 CSS 函数 "content"不起作用

css - Div Left & Right 但也顶部和底部居中?

design-patterns - 带有图像条高度问题的CSS渐变

html - 如何使用线性渐变实现两个选项卡

html - 具有线性渐变的三 Angular 形中的 CSS 颜色过渡

javascript - 如何让div只从下往下展开

html - css - 将相同的类分组在一起