试图在主要内容元素的顶部创建一个纯白色边框答案

【问题标题】：trying to create just a solid white border at the top of the main content element试图在主要内容元素的顶部创建一个纯白色边框
【发布时间】：2023-03-23 01:24:01
【问题描述】：

我试图在这个主要内容 (.tab-pane) 元素的顶部创建一个纯白色的 10 像素边框，但无论我尝试什么，我都会不断得到这个盒装的轮廓和顶部的灰色白色边框在中间和两侧是白色的。也许我试图在错误的元素上执行此操作（但我希望它位于导航和主要内容之间的导航下方）。这是我的一些 CSS：

.tab-pane { 
  border-top: 10px;
  border-color: #ffffff;
  border-style: solid;
  border-width: 100%;          
}

【问题讨论】：

如果某人的解决方案解决了您的问题，您可能希望使用大复选框接受它作为答案。欲了解更多信息：how does accepting an answer work?

标签： html css twitter-bootstrap

【解决方案1】：

试试这个简短的版本

border-top: 10px solid #FFF;

否则，完整的代码应该是：

border-top-color: #FFF;
border-top-style: solid;
border-top-width: 10px;

【讨论】：

【解决方案2】：

查看您的标记，您想要定位的区域是 id = home 因此，如果您在 CSS 中为该 id 添加白色背景色，灰色条就会消失。所以在你的样式表/css 的底部添加下面的代码。

CSS

#home {
   background-color: white;
}

【讨论】：

感谢@David Willhite！这实际上有助于我理解这一切是如何更好地协同工作的——谢谢！