移动端网页底部边框样式为何不生效？检查 border-bottom-style 属性
如果底部边框样式未按预期显示，应优先检查 border-bottom-style 属性的值是否被简写属性覆盖。
检查简写属性是否覆盖了底部样式
CSS 中 border-bottom-style 属性用于设置元素底部边框的线型。如果该属性未生效，通常是因为使用了 border 简写属性，其中包含了其他边框的样式设置。MDN 文本指出，border-bottom-style 是一个单独的属性，用于指定底部边框的线型。当使用 border: 1px solid red; 这样的简写时，虽然设置了宽度、样式和颜色，但可能没有明确指定底部样式，或者被其他边框的样式默认值影响。在移动端调试时，应确认是否在样式中同时定义了 border-bottom-style 和 border，或者 border-bottom 简写，这可能导致样式冲突或覆盖。
排查时需查看 CSS 规则的具体写法。如果代码中存在 border: 1px solid; 这样的声明，它实际上设置了所有边框的样式。MDN 文本提到 border-bottom-style 的初始值为 none，这意味着如果未显式设置，底部边框可能默认为无样式。在移动端开发中，开发者常使用简写属性以提高效率，但需注意这会统一设置四个边框。若只想修改底部样式，应确保 border-bottom-style 属性独立于 border 简写，或者明确覆盖 border 中的样式设置。
验证属性值是否为合法的关键字
border-bottom-style 属性的值必须是 MDN 文本中列出的关键字之一。合法的关键字包括 none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset。如果代码中使用了拼写错误或非关键字值，浏览器将忽略该属性。例如，将 border-bottom-style: solid; 写成 border-bottom-style: solide; 会导致样式失效。移动端浏览器对 CSS 语法的容错率较低，错误的属性值可能直接导致样式不生效。
可以通过浏览器的开发者工具检查计算后的样式。在移动端调试面板中，选中对应元素，查看 Computed 样式下的 border-bottom-style 值。如果显示为空或与预期不符，说明属性值未被正确应用。MDN 文本明确列出了所有合法的关键字值，排查时应逐一核对代码中的值是否完全匹配。此外，注意区分 none 和 hidden，虽然两者在视觉上可能相似，但它们是不同的关键字，可能影响边框的渲染行为。
确认元素是否应用了该样式
即使 border-bottom-style 属性值正确，如果元素本身没有应用该样式，底部边框也不会显示。MDN 文本指出，border-bottom-style 适用于所有元素，包括 ::first-letter 伪元素。这意味着该属性理论上对所有元素都有效。然而，在实际开发中，可能存在其他 CSS 规则通过 !important 或更高的特异性覆盖了该属性。例如，如果父元素设置了 border-bottom-style: none; 而子元素未显式覆盖，子元素的底部边框将继承父元素的样式。
验证方法是在开发者工具中检查元素的具体样式。选中元素后，查看 Styles 面板，确认 border-bottom-style 是否在当前元素的样式列表中。如果样式被其他规则覆盖，可能需要调整选择器的特异性或使用 !important（尽管不推荐）。此外，检查是否有内联样式直接设置了 border-bottom-style，内联样式的优先级通常高于外部样式表。在移动端调试时，确保没有其他 CSS 文件或样式块意外修改了该属性。
检查浏览器兼容性与继承特性
MDN 文本提到，border-bottom-style 属性在 2015 年 7 月起在浏览器中广泛可用，属于成熟特性。这意味着在现代移动端浏览器中，该属性应能正常工作。然而，极少数旧版浏览器可能不支持某些关键字值，如 groove 或 ridge。如果样式在部分设备上失效，可能是浏览器兼容性问题。排查时应确认目标设备的浏览器版本是否支持该属性。MDN 文本还指出，border-bottom-style 的继承值为 no，这意味着它不会自动继承父元素的样式。
在移动端测试时，建议在多个浏览器和设备上进行验证。如果样式在特定设备上不生效，可能是浏览器对某些关键字值的渲染差异。例如，inset 和 outset 在不同浏览器中可能有不同的视觉效果。此外，由于 border-bottom-style 不继承，如果父元素设置了样式而子元素未显式设置，子元素将使用初始值 none。因此，确保每个需要边框样式的元素都显式定义了 border-bottom-style 属性，避免依赖继承。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。