有一天产品经理告诉我App底部tab栏上边框太宽了，赶紧改窄一点。我想这个简单啊，改一下boder的宽度就OK了，结果我一看代码，border-top的宽度已经是1px了，这时如果将border的宽度设置为小于1px的值，浏览器还是当作1px来渲染。不会有任何效果。这时要不要告诉产品需求不合理，无法实现（想想还是算了吧，怕被打）。
这时只能想办法变通一下，于是我想到了css3中的transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。这里我就想通过缩放来实现绘制小于1px的线条。思路是将一个元素的边框设置为1px，再通过缩放达到将线条变窄的目的。
看下面的代码，我们给下面的三栏布局加分割线，左边的分割线设置边框为1px,右边线条使用缩放实现变窄的效果。
- html代码
<section class="layout">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</section>
- css代码
.layout{
display: flex;
height: 100%;
}
.left,.right,.middle{
flex: 1;
}
.middle{
border-left: 1px solid #000;
}
.right:before{
content: "";
height: 100%;
display: inline-block;
background-color: #000;
width: 1px;
transform: scaleX(0.5);
}
-
效果如下
图片发自简书App
这里是绘制纵向的线条，所以我们使用X轴方向的缩放scaleX( )，如果你要绘制横向的超窄线条可以使用Y轴方向的缩放scaleY( )。如果你想绘制一条倾斜的超窄线条，要怎么实现呢？实现方式：先缩放绘制出X或Y轴方向上的超窄线条，再通过transform:rotate(angle)旋转一定的角度来达到倾斜的效果。
