-
原理:利用 css 的 伪元素
::after + transfrom
进行缩放
伪元素::after
或::before
是独立于当前元素,可以单独对其缩放而不影响元素本身的缩放
如图所示:
源码
.van-divider {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
margin: 16px 0;
color: #969799;
font-size: 14px;
line-height: 24px;
border-color: #ebedf0;
border-style: solid;
border-width: 0;
&::before,
&::after {
content: '';
display: block;
flex: 1;
box-sizing: border-box;
height: 1px;
border-color: inherit;
border-style: inherit;
border-width: 1px 0 0;
transform: scaleY(0.5);
}
}