如何使用css创建标记

Question

我在网站上看到了以下图片，

他们没有使用任何背景图片，用css做这一切。 如何使用css创建这样的标签，假设其中没有Buy!按钮..

这是链接

Link to image

谢谢，

Answer 1

他们正在使用精灵形式的背景图片。

这是精灵：http://assets2.grouponcdn.com/images/groupon/common-s587a68dd07.png?L4HgENCa

Answer 2

这确实是一张图片。但是为了证明它也可能只使用css，这里有一个小提琴解决方案：http://jsfiddle.net/bspbg/

input{
    background-color:rgba(110, 180, 60, 1);
    padding:10px;
    border-radius:40px;
    border-color:white;
    border-width: 3px;
    border-style: solid;
    font-size:2em;
    font-weight:bold;
    color: white;
    margin:20px;
    margin-left: 70px;
    box-shadow:-2px -2px 1px 3px rgba(50, 150, 30,1) inset,5px 5px 5px rgba(255, 255, 255,0.5) inset;
}
.somebg{
    background-color: rgba(100, 200, 230, 1);
    width: 250px;
    height: 105px;
    box-shadow: 0px 0px 40px rgba(1,1,1,0.5) inset;
}

此处input是按钮。玩边框，半径和盒子阴影，你已经完成了：）

编辑：new fiddle with background

Answer 3

您可以使用CSS中的content: "<p>Any html you like</p>"命令在标记内呈现内容。