移动端网页简写属性 border-bottom 未设置样式为何不显示？
简写属性 border-bottom 未指定样式值时，浏览器会自动将其重置为 none，导致底部边框不可见。
检查简写属性是否包含样式关键字
当使用 border-bottom 简写属性时，如果只指定了宽度或颜色，而没有包含样式关键字，浏览器会根据默认值处理。根据 MDN 资料，border-bottom 属性的默认 border-bottom-style 值为 none。这意味着如果代码中仅写了 border-bottom: 1px solid #000，样式会正常显示；但如果写成 border-bottom: 1px，浏览器会将其视为未设置样式，从而不渲染边框。在移动端开发中，开发者常因疏忽遗漏样式关键字，导致边框不显示。
排查时需确认简写属性中是否同时包含宽度、样式和颜色。例如，border-bottom: 1px solid #000 是正确的写法，而 border-bottom: 1px 或 border-bottom: #000 则会导致样式失效。可以通过浏览器开发者工具检查计算样式，确认 border-bottom-style 的值是否为 none。如果发现值为 none，说明简写属性中未指定样式关键字，需补充 solid、dashed 等样式值。
验证样式值与浏览器兼容性
不同浏览器对 border-bottom 样式值的支持程度可能存在差异。MDN 文档指出，border-bottom 属性自 2015 年 7 月起在广泛设备上可用，但部分样式值如 groove 或 outset 在某些移动端浏览器中可能不被支持。如果使用了不支持的样式值，浏览器可能会忽略该样式或显示默认值，导致边框不显示。例如，在旧版移动浏览器中，border-bottom: 4mm ridge rgb(211 220 50 / 0.6) 可能无法正确渲染。
验证兼容性时，可以查看浏览器兼容性表格，确认当前使用的样式值是否被支持。如果使用了实验性或非标准样式值，建议改用 solid、dashed 等广泛支持的样式值。此外，移动端浏览器可能对简写属性的解析存在差异，需确保样式值符合规范。通过逐步测试不同样式值，可以确定问题是否由兼容性导致。
使用开发者工具检查计算样式
浏览器开发者工具是排查样式问题的有效工具。在移动端调试工具中，选中需要检查的元素，查看其计算样式。确认 border-bottom-style 的值是否为预期样式，以及是否有其他规则覆盖了该样式。如果发现样式被覆盖，可以调整 CSS 优先级或移除冲突的规则。例如，如果父元素设置了 border-bottom: none，子元素的 border-bottom 样式将无法生效。
验证结果时，可以尝试修改样式值并观察变化。例如，将 border-bottom 从 1px 改为 1px solid，查看边框是否显示。如果修改后边框正常显示，说明原样式值有问题。如果修改后边框仍不显示，可能是其他因素导致，如背景色遮挡或布局问题。通过逐步排查，可以确定问题的根本原因。
确认继承属性设置
CSS 属性的继承特性可能导致样式未按预期应用。border-bottom 属性默认不继承，但如果父元素设置了 border-bottom: inherit，子元素将继承父元素的边框样式。如果父元素没有设置边框，子元素将显示默认的 none 样式。在移动端布局中，某些组件可能通过继承获得样式，但依赖继承可能导致样式不一致。
检查父元素的样式定义，确认是否意外设置了继承属性。如果父元素未设置边框，子元素将不会显示边框。因此，需要确保所有需要边框的元素都明确设置了样式，避免依赖继承。通过检查继承关系，可以排除因继承导致的样式失效问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。