0

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

这是一个盒子的例子 -

边框

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

理想情况下，我只想使用 HTML 和 CSS，但我意识到我可能需要将选项卡用作图像，因为它的形状。这些盒子可以有多种尺寸，具体取决于内容。

我可以使用蓝色边框没问题

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

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

4

2 回答 2

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 */
}

您必须相应地为边框半径添加前缀，但除此之外，这应该可以在任何最近的浏览器中使用。

于 2012-09-28T09:27:39.270 回答
1

从这里开始并根据需要进行修改，应该可以满足您的需求。

于 2012-09-28T09:34:15.073 回答