1

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

标签

他们没有使用任何背景图像，而是使用 css 完成所有这些。我如何使用 css 创建这样的标签，假设其中没有Buy!按钮..

链接在这里

链接到图片

谢谢，

4

3 回答 3

4

他们使用精灵形式的背景图像。

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

于 2012-11-27T08:33:10.223 回答
1

这确实是一个形象。但只是为了证明也可以只使用 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是按钮。使用边界、半径和盒子阴影，你就完成了:)

编辑：带背景的新小提琴

于 2012-11-27T08:53:44.700 回答
0

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

于 2012-11-27T08:31:33.797 回答