移动端底部边框颜色未生效？检查 border-bottom 简写属性顺序
当移动端网页底部边框颜色未按预期显示时，应优先检查 CSS 中 border-bottom 简写属性的书写顺序。
简写属性覆盖独立样式设置
CSS 中的 border-bottom 是一个简写属性，用于同时设置底部边框的宽度、样式和颜色。根据规范，该属性会设置所有可设置的底层属性的值，即使某些值未被显式指定，也会被设置为默认值。这意味着如果先定义了独立的 border-bottom-color，随后又使用简写属性，简写属性会覆盖之前的设置。例如，先设置 border-bottom-color 为红色，再设置 border-bottom: 4px dashed blue，最终生效的样式将完全由简写属性决定。
在编写代码时，这种覆盖行为可能导致意外的结果。如果开发者希望保留之前的样式设置，就必须在简写属性中显式包含所有需要的值。简写属性允许三个值以任意顺序指定，并且可以省略其中一两个值，但一旦使用了简写，它就会重置所有底层属性。因此，在移动端调试边框问题时，需要确认是否存在简写属性覆盖了独立样式设置的情况。
默认值导致边框颜色失效
简写属性的一个关键特性是，它会将未指定的底层属性设置为默认值。对于 border-bottom 而言，默认的 border-bottom-color 是 currentcolor。这意味着如果简写属性中只指定了宽度和样式，而没有指定颜色，浏览器将使用当前文本颜色作为边框颜色。例如，代码 border-bottom: 4px dashed; 在没有指定颜色时，边框颜色会跟随文字颜色，可能导致与背景色混淆。
在移动端开发中，这种默认值行为是导致边框颜色失效的常见原因。开发者可能误以为只指定宽度和样式就足够了，但实际上必须显式指定颜色值。检查时，应确保简写属性中包含了颜色值，或者使用独立的 border-bottom-color 属性来设置颜色。此外，注意颜色值的格式必须符合规范，例如使用 rgb() 或 hex 格式。
检查代码中的属性声明顺序
排查边框颜色未生效的问题时，应检查 CSS 文件中属性声明的顺序。如果先声明了独立的 border-bottom-color，随后又声明了 border-bottom 简写属性，简写属性会覆盖之前的设置。例如，以下代码会导致边框颜色被重置为简写属性指定的值：border-bottom-color: red; border-bottom: 4px dashed blue; 实际上，这等同于 border-bottom-color: currentcolor; border-bottom: 4px dashed blue;。
为了复现和验证这个问题，可以在浏览器开发者工具中检查元素的最终计算样式。如果发现 border-bottom-color 的值是 currentcolor，而 border-bottom 的值是 4px dashed blue，说明简写属性覆盖了之前的设置。此时，应调整代码顺序，确保简写属性在最后声明，或者在简写属性中显式包含所有需要的值。
验证边框显示效果
验证边框是否按预期显示，可以通过调整 CSS 代码并观察移动端页面的效果。首先，确保简写属性中包含了颜色值，例如 border-bottom: 4px dashed blue;。然后，在移动设备或浏览器开发者工具的移动模拟模式下查看页面。如果边框正常显示，说明问题已解决。
如果边框仍然不显示，可以进一步检查是否有其他样式冲突。例如，检查是否有其他属性（如 border-bottom-width 或 border-bottom-style）被设置为 none 或透明。此外，确保简写属性的值符合规范，例如宽度值应为长度或关键字（如 thin、medium、thick），颜色值应为有效的颜色表示。通过逐步排查，可以确定导致边框失效的具体原因。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。