CSS边框没有出现答案

【问题标题】：CSS borders not appearingCSS边框没有出现
【发布时间】：2020-05-01 05:17:10
【问题描述】：

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

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

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

我正在使用以下 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 帖子，所以我希望格式正确！

【问题讨论】：

您是否在任何地方声明了边框样式？这是一个必需的属性，如果没有它，所有边框属性都将被忽略。我在您的代码中的任何地方都没有看到它

标签： html css

【解决方案1】：

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

为了获得您在图片中呈现的预期效果 - jsFiddle demo

<ul> 的背景颜色较深
<li> 左侧的宽边框
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;

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

【讨论】：

【解决方案2】：

啊……布赖恩，你打败了我。我插入了border-style，然后是“BORDER”

border: 5px solid white;

【讨论】：

【解决方案3】：

实际上，他的技巧是边框应用于锚标签而不是列表！干杯! :) 是的，如果您将border-color 作为属性应用，您还应该应用border-style 和border-width :)

【讨论】：