移动端H5 1px边框问题解决

alokka

于 2023-02-15 09:19:51 发布

阅读量330

点赞数

分类专栏：移动端文章标签： css html 前端

本文链接：https://blog.csdn.net/alokka/article/details/129037133

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
		<title>移动端1px边框问题</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			li {
				list-style: none;
			}

			.lines {
				width: 200px;
				margin: 0 auto;
			}

			.lines li {
				border: 1px solid #cccccc;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 13px;
				margin-top: 10px;
			}

			.hairlines {
				width: 200px;
				margin: 0 auto;
				border-radius: 3px;
			}

			.hairlines li {
				height: 50px;
				line-height: 50px;
				border: none;
				text-align: center;
				position: relative;
				margin-top: 10px;
			}

			.hairlines li:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				border: 1px solid #cccccc;
				border-radius: 26px;
				width: 200%;
				height: 200%;
				transform: scale(0.5);
				transform-origin: left top
			}
		</style>
	</head>
	<body>
		粗线
		<ul class="lines">
			<li>1</li>
			<li>2</li>
		</ul>
		细线
		<ul class="hairlines">
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>