前言
前言:之前用antd-mobile里的组件等组件时发现它都有自带边框,多层嵌套后就会发现边框重复叠加,影响美观,有时候我们根本不需要边框,那怎么删掉这些边框呢?本文主要介绍如何删掉自带边框。
案例
如下:
去掉边框前
去掉边框后
问题分析
他的原理是在
在组件中通过.am-list-body::before和am-list-body::after加入background-color:#ddd,来实现上下边框
在组件中通过.am-list-line::after加入background-color:#ddd实现下边框。
知道原理后再去解决是不是很简单啊?我们只需要把对应的背景色替换成白色就可以
解决
在less或css文件中加入如下代码即可
//list组件
div.am-list-body::before{
background-color: white!important;
}
div.am-list-body::after{
background-color: white!important;
}
.am-list-body {
border-top: none;
border-bottom: none;
}
//inputItem组件
div.am-list-line::after{
background-color: white!important;
}
.am-list-line {
border-top: none;
border-bottom: none
}