移动端网页底部边框宽度设置为何不生效
检查 border-bottom 简写属性顺序与默认值覆盖机制，确认是否被其他属性覆盖。
检查简写属性是否覆盖了底部边框宽度
在移动端网页开发中，直接设置 border-bottom-width 属性有时无法生效，这通常是因为使用了简写属性 border-bottom。MDN 文档指出，border-bottom 属性会覆盖单独设置的 border-bottom-width 值。如果代码中先定义了 border-bottom: 1px solid red，随后又单独设置 border-bottom-width: 2em，浏览器会优先使用简写属性中的宽度值。因此，排查时应检查 CSS 代码中是否存在 border-bottom 简写定义，并确认其 width 部分是否符合预期。
为了复现并验证这个问题，可以在移动端浏览器中打开开发者工具，查看计算后的样式。具体操作是选中目标元素，在计算样式面板中查看 border-bottom-width 的最终值。如果发现该值为 medium 或其他固定值，而非代码中设置的 2em，说明 border-bottom 简写属性覆盖了单独设置。此时应修改 CSS，将简写属性拆分为 border-bottom-style 和 border-bottom-width，或者调整 border-bottom 简写属性中 width 的值，以确保底部边框宽度按预期显示。
确认 border-bottom 简写属性中 width 的值
border-bottom 简写属性包含四个子属性：border-bottom-width、border-bottom-style 和 border-bottom-color。MDN 提供的语法示例显示，border-bottom 属性的值顺序是 width style color。如果代码中只写了 border-bottom: 2em solid crimson，浏览器会自动将 width 设置为 2em，style 设置为 solid，color 设置为 crimson。如果后续代码试图单独修改 border-bottom-width，由于简写属性已经定义了 width，单独的 width 设置会被忽略。
验证这一点的具体方法是使用浏览器的元素检查功能。在移动端调试模式下，选中元素并查看“计算样式”中的 border-bottom 属性。如果计算样式中显示的 border-bottom 为 2em solid crimson，而 border-bottom-width 显示为 medium，则证实了简写属性覆盖了单独设置。解决方法是将 border-bottom 简写属性拆分为三行代码，分别设置 border-bottom-width、border-bottom-style 和 border-bottom-color，或者直接修改简写属性中的 width 值，例如改为 border-bottom: 4px solid crimson。
排查 border-bottom-width 的初始值与继承性
根据 MDN 文档，border-bottom-width 的初始值是 medium，且该属性不可继承。这意味着如果父元素设置了 border-bottom-width: 2em，而子元素没有显式设置该属性，子元素的底部边框宽度将默认为 medium。在移动端布局中，如果子元素（如列表项或卡片）没有单独设置 border-bottom-width，可能会出现底部边框宽度不一致的情况。因此，排查时应检查目标元素是否显式设置了 border-bottom-width，或者是否需要通过继承来应用父元素的宽度。
为了验证初始值的影响，可以在 CSS 中移除目标元素的 border-bottom-width 设置，观察其底部边框宽度是否变为 medium。如果需要保持与其他元素一致的宽度，可以在父元素上设置 border-bottom-width，并确保子元素不会覆盖该值。此外，MDN 提到 border-bottom-width 适用于所有元素，包括 ::first-letter 伪元素。如果目标元素是文本容器，检查伪元素是否意外设置了不同的宽度，也是排查步骤之一。
验证 border-bottom-width 的计算值与动画类型
MDN 文档指出，border-bottom-width 的计算值是绝对长度，并被“吸附”为线宽。这意味着无论代码中设置的是 2em、4px 还是 thick，浏览器最终都会将其转换为具体的像素值。在移动端调试时，查看计算样式中的 border-bottom-width 可以确认这一转换是否正确。例如，如果代码中设置了 border-bottom-width: 2em，计算值可能显示为 32px（取决于设备像素比）。如果计算值异常，可能是单位设置错误或浏览器渲染问题。
此外，border-bottom-width 的动画类型是长度。如果代码中使用了 CSS 动画来改变 border-bottom-width，例如 transition: border-bottom-width 0.5s，浏览器会尝试平滑过渡宽度变化。在移动端验证时，可以添加一个简单的动画效果，观察底部边框宽度是否按预期过渡。如果动画不生效，可能是浏览器不支持该属性或动画类型，或者动画目标值未正确设置。通过检查计算样式和动画状态，可以确认 border-bottom-width 的行为是否符合预期。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。