先来看两张图,一定要仔细看
粗边框效果图
细边框效果图
这是在浏览器端调试的截图。。凡胎肉眼可见。。没多大区别。。。但在移动端UI看的出来 o(╥﹏╥)o
直接说怎么实现的吧,主要利用伪元素和**transform: scaleY(.5);**属性对1px大小的伪元素进行缩小
.tablelist li{
position: relative;
padding: 0 10px;
display: flex;
text-align: center;
align-items: center;
color: #333;
box-sizing: border-box;
}
.tablelist li::after{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.tablelist li:last-child::after{
display: none;
}
此方法有个缺点就是如果要做4方都是细边框的。。。就麻烦了