<!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像素解决方案
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
