为什么保留border宽度仅移除边框样式和颜色时边框会消失？

你遇到的问题是CSS border 简写属性的默认取值规则导致的，具体原因如下：

核心原理 #

• border 是复合简写属性，单次声明会同时覆盖 border-width（边框宽度）、border-style（边框样式）、border-color（边框颜色）三个子属性的取值
• 三个子属性中，border-style 的浏览器初始默认值为none，另外两个属性的默认值分别是：border-width 默认为 medium，border-color 默认继承当前元素的文本色值
• 当你写 border: 5px 时，仅显式指定了宽度，其余两个未显式声明的属性会被自动重置为默认值，也就是 border-style 被设为了 none，边框样式为无的状态下，无论宽度设置多大都不会被渲染，因此边框直接消失。

正确写法参考 #

如果你只是想修改边框宽度，不需要改动原有样式和颜色，不要使用 border 简写属性，直接单独设置宽度子属性即可：

h1
{
  color: magenta;
  padding: 20px;
  border: solid #000 5px;
  /* 仅修改边框宽度的写法 */
  border-width: 5px;
  margin:10px;
}

<body>
  <h1> This is a test </h1>
</body>

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