使用伪元素

  1. [class*='van-hairline']::after {
  2.   content: ' ';
  3.   position: absolute;
  4.   box-sizing: border-box;
  5.   pointer-events: none;
  6.   top: -50%;
  7.   right: -50%;
  8.   bottom: -50%;
  9.   left: -50%;
  10.   border: 0 solid #ebedf0;
  11.   transform: scale(0.5);
  12. }
  14. .van-hairline,
  15. .van-hairline--top,
  16. .van-hairline--left,
  17. .van-hairline--right,
  18. .van-hairline--bottom,
  19. .van-hairline--surround,
  20. .van-hairline--top-bottom {
  21.   position: relative;
  22. }

上边框

  1. .van-hairline--top::after {
  2.   border-top-width: 1px;
  3. }

下边框

  1. .van-hairline--bottom::after {
  2.   border-bottom-width: 1px;
  3. }

左边框

  1. .van-hairline--left::after {
  2.   border-left-width: 1px;
  3. }

右边框

  1. .van-hairline--right::after {
  2.   border-right-width: 1px;
  3. }

上下边框

  1. .van-hairline--top-bottom::after,
  2. .van-hairline-unset--top-bottom::after {
  3.   border-width: 1px 0;
  4. }

全边框

  1. .van-hairline--surround::after {
  2.   border-width: 1px;
  3. }