css如何画出类似原生的线条？

最新推荐文章于 2023-10-10 16:24:42 发布

转载最新推荐文章于 2023-10-10 16:24:42 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiezhonglong/p/6429905.html

文章标签：

#前端 #ViewUI

本文介绍了一种在移动端实现更细1px线条的方法，通过CSS的scaleY(0.5)属性来达到视觉上更精细的线条效果。该技巧仅适用于移动端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做前端的程序猿特别是移动端的，都很头疼遇到一种情况就是需要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端是没有效果的，移动端才有效果。

转载于:https://www.cnblogs.com/xiezhonglong/p/6429905.html