应用页面底部出现不希望显示的线条，可通过五种方法修改：一、覆盖css border-bottom属性；二、调整shadow dom中内置组件样式；三、修改小程序原生组件border属性；四、排查flex布局导致的伪底线；五、禁用ui框架默认分割线配置。
如果您发现应用页面底部出现了一条不希望显示的线条，可能是由于UI框架默认样式、CSS边框属性或组件自带的分割线导致。以下是修改应用页面底线样式的多种方法：
一、检查并覆盖CSS border-bottom属性
多数情况下，页面底部线条由元素的border-bottom样式生成，可通过定位对应DOM节点并重写其边框属性来移除或更改。
1、使用浏览器开发者工具（F12）选中页面底部区域，查看计算样式中是否包含border-bottom相关声明。
2、在自定义CSS文件或
3、若需替换为其他样式，可改用：border-bottom: 2px solid #e0e0e0;
二、调整Shadow DOM中内置组件的样式
部分跨平台框架（如Ionic、Weex或小程序自定义组件）将底部线条封装在Shadow DOM内部，常规CSS选择器无法直接穿透，需使用特定伪类或暴露样式接口。
1、在组件定义处查找是否提供border-style、show-border等可配置props，并将其设为false或none。
2、若使用Web Components，尝试在宿主样式中添加：::part(bottom-line) { display: none; }
3、对于支持/deep/或::ng-deep的Angular项目，可在组件SCSS中写入：::ng-deep .bottom-separator { border-bottom-width: 0; }
三、修改小程序原生组件的border属性
微信小程序、支付宝小程序等平台的部分容器组件（如view、scroll-view）可能通过border类名或border-style内联样式渲染底线，需从模板层干预。
1、检查WXML中是否绑定了class="line-bottom"或类似样式类，并在WXSS中对该类设置：border-bottom: 0;
2、若底线来自<van-divider></van-divider>等第三方组件，查阅其文档确认hairline属性是否启用，改为：hairline="{{false}}"
3、在页面JSON配置中关闭全局底部阴影（如某些UI库的enableBottomBorder: false选项）。
四、排查Flex布局导致的伪底线现象
当父容器使用flex布局且子元素存在margin或padding错位时，可能因背景色差异形成视觉上的“底线”，并非真实边框。
1、选中疑似产生底线的父容器，在开发者工具中临时关闭其background-color，观察线条是否消失。
2、检查子元素末尾是否存在未清除的margin-bottom或padding-bottom，将其设为：margin-bottom: 0;
3、为父容器添加overflow: hidden;以裁切溢出内容，验证是否为边缘像素渲染残留。
五、禁用UI框架默认分割线配置
主流UI框架（如Vant、NutUI、Ant Design Mobile）常为列表项、卡片或页脚组件预设底部分割线，需通过组件属性统一控制。
1、在列表组件中查找border、show-bottom-border或divider属性，设为false。
2、若使用Vant的van-cell-group，添加属性：border="{{false}}"
3、对于Ant Design Mobile的List.Item，设置extraStyle={{ borderBottom: 'none' }}。
