没有出现 CSS 边框

Question

我正在尝试设计我的导航菜单设计以反映 timeanddate.com 上的设计，如下图所示：

为了创建颜色，他们在 CSS 中使用了简单的底部和左边框。

我正在尝试为我的 <li> 网站沙箱 http://www.escapetech.com:8080 上的标签添加边框。

我正在使用以下 CSS：

 .anylinkcss li {
  list-style-type: none;
}

.participate li {
  list-style-type: square;
  border-left-color: #fa514d;
}

#navigation_bar {
  height: 31px;
  list-style: none;
  width: 1000px;
  margin-top: 15px;
}

#navigation_bar li {
  float: left;
  padding-right: 35px;
  padding-left: 10px;
  margin: auto 0px;
  vertical-align: middle;
}

#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
  position: absolute;
  line-height: 18px;
  z-index: 20;
  background-color: #000;
  text-align:left;
  visibility: hidden;
  left:  421px;
  top:207px;
  padding: 7px;
  padding-left: 25px;
}

#anylinkcss3 进一步表示下拉菜单的样式，而 #navigation_bar 样式用于整个栏。无论我在哪里添加任何边框样式，都没有出现，即使在我注释掉所有 CSS 代码并仅在这些 ID 和类上包含边框之后也是如此。

我当前的菜单位于我上面发布的链接中，如果有人可以看一下并告诉我为什么可能出现边框问题，我将不胜感激。这是我的第一篇 Stack Exchange 帖子，所以我希望它的格式正确！

原文由 Nick SJSU 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然你设置了宽度和颜色，但你不能遗漏带边框的样式参数。

为了获得您在图像中呈现的预期效果- jsFiddle 演示

• 深色背景颜色为 <ul>
• <li> 左侧的宽边框
• a margin-bottom: 2px 作为底部边框 - 显示 ul 背景
• 以及一些小的调整，比如文本缩进等

---

关于边界的一些信息

CSS 边框由 3 个参数组成

• 边框宽度
• 边框样式
• 边框颜色

您可以设置一个值，该值适用于所有方面

border-width: 5px;
border-style: solid;
border-color: red;

或者用短手 border: 5px solid red; 也适用于所有方面。

---

您可以单独设置每个边框的样式，就像您在上面所做的那样。

• 边框宽度
• 边框样式
• 边框颜色

例子：

 border-left-width: 5px;
border-left-style: solid;
border-left-color: white;

这也可以用速记来完成： border-left: 5px solid white;

---

了解更多信息和其他边境机会

• https://developer.mozilla.org/en-US/docs/Web/CSS/border
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

原文由 im_brian_d 发布，翻译遵循 CC BY-SA 3.0 许可协议