搜索引擎中的术语气泡

Question

所以我会尽力描述我想做的事情，但我认为图片会更公正。

基本上我正在开发一个搜索引擎，该引擎接受逗号分隔的关键字。我希望它的工作方式是在用户输入一个术语并输入逗号后，该术语出现在搜索栏下方的一个大小适当的“气泡”中，并带有一个“x”，允许他们删除该术语从他们的搜索中。

从编程上来说，我知道该怎么做。不过，我对如何制作图形有点困惑。我知道这是一个编程论坛，但我不确定是否应该为气泡创建“基本”图形，然后根据搜索词的长度动态调整其大小，或者是否有其他方法可以做到这一点。

想法？

编辑：哇，刚刚想起 StackExchange 完全实现了我想要的功能，没有“x”选项。这就是我想要的，除了更圆润的样式。

Answer 1

类似这样的事情：

span {
    display: inline-block;
    background: blue;
    padding: 5px 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

……应该可以解决问题。除了删除图标之外，不需要玩图形。

Answer 2

使用滑动门技术...

http://kailoon.com/ css-sliding-door-using-only-1-image/

然后有一个自动宽度，两侧都有填充。

Answer 3

您可以采用 HTML 5 方式向 li 的 / div 添加圆角。

查看 border-radius 属性来了解这一点。尽管并非所有（旧版/IE:)）浏览器都支持。

或者

您可以制作类似以下内容的内容（半伪代码）：

<div class="button">
  <div class="left"></div>
  <div class="content">Term</div>
  <div class="right"></div>
</div>

.button .left { background: url('image with the left part of the button'); width: the width of the image; }
.button .right { background: url('image with the rightpart of the button'); width: the width of the image; }
.button .content { background: gray; }

它将有两侧（左/右），圆角作为图像和固定宽度。中间的内容部分没有固定的宽度。

编辑

第二种方式的演示：http://jsfiddle.net/kc5ZC/ 4/

我只是将左/右设置为相同的红色背景颜色。您必须为其创建带有圆角的左/右图像。