CSS - 使用制表符实现边框图像

Question

更多的是后端程序员，但我正在实现一个设计，我只是想看看实现边框的最有效方法是什么。

以下是方框的示例 -

这个想法是蓝色标签将包含该部分的标题文本。

理想情况下，我只想使用HTML和CSS，但我意识到我可能需要将标签用作图像，因为它的形状。根据内容，这些盒子可以是多种尺寸。

我可以使用

做蓝色边框没问题

 -webkit-border-radius: 10px; -moz-border-radius: 10px;

或类似的，它主要是为我提出问题的标签。有没有人做过类似可以提供建议的事情？

Answer 1

.tab-header {
  background: blue;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 10px; /* we extend the header by 10px to the bottom */
}

.tab-body {
  border: 1px solid blue;
  background: white; /* set a solid background */
  margin-top: -10px; /* move the body 10px up, so it covers the
                        10px padding from above */
}

您必须相应地在border-radius内容前加上前缀，但除此之外，这应该适用于任何最近的浏览器。

Answer 2

Start here 并根据需要进行修改，应该为您所追求的目标而努力。