<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1px</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="item item-1px">列表1</div>
<div class="item item-0_5px">列表2</div>
<div class="item item-css3transform">列表3</div>
<div class="item item-shadow">列表4</div>
<div class="item item-background">列表5</div>
<div class="item item-4-border">列表6</div>
<style>
.item {
padding: 10px 0
}
.item-1px {
border-bottom: 1px solid #ccc;
}
.item-0_5px {
border-bottom: .5px solid #ccc;
/*ios有效 android无效*/
}
.item-css3transform::after {
content: '';
display: block;
height: 1px;
transform: scaleY(0.5);
background: #ccc;
position: relative;
top: 10px;
}
.item-shadow {
box-shadow: 0 0.5px 0 0 #ccc;
}
.item-background::after {
display: block;
content: '';
height: 1px;
background: linear-gradient(0deg, #ccc 50%, transparent 50%);
position: relative;
top: 10px;
}
.item-4-border {
margin: 10px 0;
padding: 10px;
background: linear-gradient(to bottom, #ccc .5px, transparent 0), linear-gradient(to left, #ccc .5px, transparent 0), linear-gradient(to right, #ccc .5px, transparent 0), linear-gradient(to top, #ccc .5px, transparent 0);
}
</style>
</body>
</html>
移动端1px像素解决方案
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
