为何border-bottom-style: dotted;无法为导航栏添加虚线？

看了你的代码，很快就找到问题所在啦，咱们一步步来解决：

核心原因：缺少边框的宽度和颜色设置 #

你只写了 border-bottom-style: dotted;，但浏览器默认的边框宽度是 0，而且默认颜色可能和你的导航栏背景色（#C9FD99）几乎一致，导致虚线根本显示不出来——不是样式没生效，是你看不见它 😂

快速修复方案（给整个导航栏容器加虚线） #

直接用 border-bottom 简写属性，把宽度、样式、颜色一次性设置好，这样既简洁又不会出错：

.topnav {
  width: 100%;
  /* 注意：float 没有 center 值哦，要居中容器的话改成 margin: 0 auto; */
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px 0;
  background-color: #C9FD99;
  /* 新增：设置底部虚线，参数可按需调整 */
  border-bottom: 2px dotted #9F257D;
}

额外需求：给每个导航链接加虚线？ #

如果你不是想给整个导航栏容器加虚线，而是想让每个导航项的底部带虚线，那就把样式加到 .topnav a 上：

.topnav a {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  /* 给每个链接加底部虚线 */
  border-bottom: 2px dotted #9F257D;
  /* 加个内边距让虚线和文字更协调 */
  padding-bottom: 3px;
}

这样调整后，虚线就能正常显示啦～

内容的提问来源于stack exchange，提问作者Webdesignerinclass