移动端网页边框图片左右拉伸不一致如何排查
当移动端网页边框图片左右两侧拉伸效果不同时，应检查 border-image-repeat 属性是否使用了双值语法。
检查 border-image-repeat 属性是否使用了双值语法
移动端网页边框图片左右两侧拉伸效果不一致，通常是因为 CSS 中的 border-image-repeat 属性使用了双值语法。根据资料说明，当 border-image-repeat 属性指定两个值时，第一个值应用于上、中、下三个边，第二个值应用于左、右两个边。如果开发者只设置了一个值，所有四个边会应用相同的行为。若希望左右两侧拉伸效果不同，必须在 CSS 中明确指定两个值，例如 border-image-repeat: stretch repeat。
在浏览器开发者工具中，选中包含边框图片的元素，查看计算后的样式。如果 border-image-repeat 显示为 stretch repeat，则左右两侧分别应用了拉伸和重复行为。若显示为单一的 stretch，则说明属性未正确设置双值，导致左右拉伸效果一致。确保属性值符合语法要求，即从 stretch、repeat、round、space 中选择，并用空格分隔两个值。
验证 border-image-repeat 属性的值是否正确应用
验证属性值是否正确应用，可以通过修改 CSS 代码并观察移动端页面的实时变化。在开发者工具的样式面板中，将 border-image-repeat 的值从 stretch 修改为 stretch repeat，保存后刷新页面。如果左右两侧的边框图片拉伸效果随之改变，说明属性值已正确应用。若修改后效果无变化，可能是浏览器缓存或 CSS 优先级问题，需要清除缓存或检查样式表中的其他规则。
使用资料中的示例代码进行测试，创建一个宽度为 12rem 的 div，设置边框图片和 border-image-repeat 属性。通过下拉菜单切换不同的值，观察边框图片的重复和拉伸行为。例如，选择 space round 时，边框图片会重复并填充空隙，多余的空隙会分布在图片之间。通过实际操作验证属性值对边框图片显示的具体影响，确保左右两侧的效果符合预期。
排查 border-image-repeat 属性的继承与计算值问题
如果 border-image-repeat 属性在父元素中设置，子元素可能继承该属性值。检查父元素的样式定义，确保子元素未通过其他规则覆盖该属性。资料指出，border-image-repeat 属性的初始值为 stretch，且不继承。如果子元素未明确设置该属性，应继承父元素的值。若父元素未设置，子元素将默认应用 stretch 行为，导致左右拉伸效果一致。
在浏览器开发者工具中，查看元素的继承样式和计算样式。如果 border-image-repeat 显示为 unset，说明属性未在任何地方定义，浏览器将使用默认值 stretch。确保在样式中明确设置 border-image-repeat 属性，避免依赖继承或默认值。通过检查继承链和计算值，定位属性未正确应用的原因，确保左右两侧的边框图片拉伸效果符合设计要求。
确认 border-image-repeat 属性的兼容性与浏览器支持
border-image-repeat 属性在移动端浏览器中的支持情况可能影响显示效果。根据资料，该属性在 2016 年 3 月起在多个浏览器中广泛可用。检查目标移动端浏览器的兼容性列表，确保其支持 border-image-repeat 属性及其双值语法。如果浏览器版本较旧，可能不支持双值语法或某些关键字，导致左右拉伸效果异常。
在移动端设备或模拟器上测试边框图片的显示效果，对比不同浏览器版本的表现。如果发现某些浏览器不支持双值语法，可以降级为单值语法，或使用浏览器前缀（如 -webkit-border-image-repeat）确保兼容性。通过实际测试和兼容性检查，确保边框图片在目标移动端浏览器中正确显示，避免因浏览器不支持导致左右拉伸效果不一致。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。