为什么CSS border属性未搭配border-style属性使用时不生效

核心诱因 #

• CSS的border是包含三个子属性的简写属性，完整规则为border: [边框宽度] [边框样式] [边框颜色];，其中边框样式border-style是唯一必填项，浏览器默认值为none，也就是无框样式。
• 你之前单独写border属性时没有指定边框样式，浏览器直接走默认的none规则，因此看不到边框；当你额外追加border-style: solid;后补全了必填属性，边框自然可以正常渲染。

正确的边框设置示例 #

你可以直接在border简写属性里一次性补全所有参数，不需要分开写：

div {
  /* 依次对应 宽度1px、实线样式、黑色 三个参数 */
  border: 1px solid #000;
}

内容的提问来源于stack exchange，提问作者M.B.Manage