做前端的程序猿特别是移动端的,都很头疼遇到一种情况就是需要div底部加一个线条但是 1px的效果很粗,跟设计案上的不符合。

我的一个伙伴查找出来的一个解决方法:

在需要加上的线条的地方加上一个div class是一下对应的类,(使用的时候自己试试就知道了)

css代码:

.list-up-down-line:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}

.list-up-down-line:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}

 

注意:在pc端是没有效果的,移动端才有效果。

 

相关文章:

  • 2022-12-23
  • 2021-11-05
  • 2022-01-21
  • 2022-01-11
  • 2021-11-23
猜你喜欢
  • 2021-11-21
  • 2022-02-26
  • 2021-11-14
  • 2021-10-17
  • 2022-12-23
  • 2021-11-17
  • 2021-10-16
相关资源
相似解决方案