移动端边框样式未生效？检查 border-bottom 简写属性顺序
当单独设置 border-bottom-style 后再使用 border-bottom 简写属性时，简写属性会覆盖之前的样式设置，导致边框不显示。
为何单独设置样式后边框消失
CSS 中的 border-bottom 是一个简写属性，它会同时设置边框宽度、样式和颜色。根据规范，简写属性会重置所有可设置的子属性，即使只指定了部分值。如果先单独设置了 border-bottom-style，随后又使用了 border-bottom 简写属性，简写属性会覆盖之前的设置，并将未指定的子属性重置为默认值。默认的边框样式是 none，因此边框会消失。
例如，先设置 border-bottom-style: dotted，再设置 border-bottom: thick green。这实际上等同于设置 border-bottom-style: none 和 border-bottom: thick green。由于默认的 border-bottom-style 是 none，最终不会显示任何边框。这种覆盖行为是简写属性的标准机制，旨在简化 CSS 编写，但也容易导致样式冲突。
如何排查边框不生效的问题
检查代码中是否存在先设置子属性再设置简写属性的情况。确认 border-bottom 的值是否包含了样式部分。如果只指定了宽度和颜色，而没有样式，边框将不会显示。可以通过浏览器的开发者工具检查计算后的样式，查看 border-bottom-style 是否被重置为 none。
验证 border-bottom 的语法是否正确。简写属性可以接受一个、两个或三个值，顺序不限。如果只指定一个值，它将被视为宽度；两个值则分别对应宽度和样式；三个值则依次对应宽度、样式和颜色。确保没有遗漏样式部分，例如 border-bottom: 1px solid blue 是正确的，而 border-bottom: 1px blue 是错误的，因为缺少了样式。
正确的边框设置方法
直接使用 border-bottom 简写属性设置所有需要的值，避免单独设置子属性。这样可以确保所有子属性都被正确设置，不会出现覆盖问题。例如，使用 border-bottom: 4px dashed blue 可以同时设置宽度、样式和颜色。
如果需要单独调整边框的某一部分，可以使用对应的独立属性。例如，使用 border-bottom-width 设置宽度，border-bottom-style 设置样式，border-bottom-color 设置颜色。这样可以精确控制边框的各个部分，而不会相互干扰。
验证结果的方法
在浏览器中打开页面，检查元素的边框是否按预期显示。使用开发者工具的元素检查器，查看计算后的样式，确认 border-bottom-style 的值是否正确。如果边框不显示，检查 border-bottom 的值是否包含了样式部分。
对比不同浏览器的显示效果。虽然 border-bottom 是广泛支持的属性，但不同浏览器对简写属性的处理可能略有不同。确保在目标浏览器中边框正常显示，没有样式丢失或覆盖的问题。如果问题仍然存在，检查是否有其他 CSS 规则覆盖了 border-bottom 的设置。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。