移动端网页 border-bottom 设置宽度或颜色为何不显示
当简写属性 border-bottom 只包含宽度或颜色值时，浏览器会将样式重置为 none，导致边框不可见。
检查简写属性是否包含样式关键字
在 CSS 中，border-bottom 是一个简写属性，用于设置元素底部的边框。根据规范，该属性可以包含宽度、样式和颜色三个值。如果只指定了宽度或颜色，而省略了样式关键字，浏览器会将样式默认值视为 none。这意味着即使设置了宽度或颜色，边框也不会显示。例如，代码 border-bottom: 1px solid blue 会显示蓝色实线边框，而 border-bottom: 1px blue 则不会显示任何边框。
要验证这个问题，可以在浏览器开发者工具中检查元素的样式。如果发现 border-bottom 属性的值只包含长度或颜色，而没有样式关键字，那么边框不显示的原因就是样式被重置为 none。确保在简写属性中包含样式关键字，如 solid、dashed 或 double，是解决此问题的关键。
确认样式关键字是否被正确应用
当简写属性 border-bottom 包含样式关键字时，浏览器会按照顺序解析宽度、样式和颜色。如果样式关键字位于最后，它将覆盖之前设置的宽度或颜色值。例如，代码 border-bottom: thick green dotted 实际上会将宽度设置为 thick，颜色设置为 green，样式设置为 dotted。如果样式关键字位于前面，它将覆盖之前设置的宽度或颜色值，但不会影响样式本身。
为了确认样式关键字是否被正确应用，可以在浏览器开发者工具中检查元素的样式。如果发现 border-bottom 属性的值包含样式关键字，并且样式关键字位于最后，那么边框应该会显示。如果样式关键字位于前面，那么边框应该不会显示。
排查继承或重置属性的影响
border-bottom 属性的继承性为 no，这意味着它不会从父元素继承样式。如果父元素设置了 border-bottom，子元素不会自动继承该样式。此外，如果使用了全局值如 inherit、initial、revert 或 unset，可能会覆盖当前设置的样式。例如，代码 border-bottom: inherit 会强制子元素继承父元素的 border-bottom 样式，如果父元素没有设置样式，子元素也不会显示边框。
要排查继承或重置属性的影响，可以在浏览器开发者工具中检查元素的样式。如果发现 border-bottom 属性的值包含全局值，那么边框不显示的原因可能是全局值覆盖了当前设置的样式。确保 border-bottom 属性的值不包含全局值，或者全局值指向一个有效的样式，是解决此问题的关键。
验证边框显示效果
在完成上述检查后，可以在浏览器中验证边框的显示效果。如果 border-bottom 属性的值包含样式关键字，并且没有继承或重置属性的影响，那么边框应该会显示。如果边框仍然不显示，那么可能需要检查其他 CSS 属性，如 background-color 或 padding，是否影响了边框的显示。
为了验证边框的显示效果，可以在浏览器中查看元素的渲染结果。如果边框显示正常，那么问题已经解决。如果边框仍然不显示，那么可能需要检查其他 CSS 属性，如 background-color 或 padding，是否影响了边框的显示。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。