1px的border 1像素边框

最新推荐文章于 2023-08-21 07:36:26 发布

hangGe0111

最新推荐文章于 2023-08-21 07:36:26 发布

阅读量405

点赞数

分类专栏： html 文章标签： 1px边框

本文链接：https://blog.csdn.net/hangGe0111/article/details/83025538

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0
			}
			
			.border2 {
				margin-bottom: 10px;
				border-bottom: 1px solid red;
			}
			
			.border1 {
				position: relative;
			}
			
			.border1::after {
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				border-top: 1px solid red;
				content: ' '
			}
			
			@media (-webkit-min-device-pixel-ratio: 1.5),
			(min-device-pixel-ratio:1.5) {
				.border1::after {
					-webkit-transform: scaleY(0.7);
					transform: scaleY(0.7)
				}
			}
			
			@media (-webkit-min-device-pixel-ratio: 2),
			(min-device-pixel-ratio:2) {
				.border1::after {
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5)
				}
			}
			
			.border1t_e9e9e9::after,
			.border1b_e9e9e9::after {
				content: ' ';
				display: block;
				position: absolute;
				left: 0;
				width: 100%;
			}
			
			.border1b_e9e9e9::after {
				bottom: 0;
				border-bottom: 1px solid #e9e9e9;
			}
			
			.border1t_e9e9e9::after {
				top: 0;
				border-top: 1px solid #e9e9e9;
			}
			
			@media (-webkit-min-device-pixel-ratio: 1.5),
			(min-device-pixel-ratio:1.5) {
				.border1b_e9e9e9::after,
				.border1t_e9e9e9::after {
					-webkit-transform: scaleY(0.7);
					transform: scaleY(0.7)
				}
			}
			
			@media (-webkit-min-device-pixel-ratio: 2),
			(min-device-pixel-ratio:2) {
				.border1b_e9e9e9::after,
				.border1t_e9e9e9::after {
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5)
				}
			}
		</style>
	</head>

	<body>
		<div class="border2">
			我是假的1px
		</div>
		<div class="border1">
			标准1px
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script type="text/javascript">
		</script>
	</body>

</html>

2.效果

3.推荐参考地址：

https://www.jianshu.com/p/7e63f5a32636

https://www.cnblogs.com/lunarorbitx/p/5287309.html

hangGe0111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1px的border 1像素边框

1.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0; pa
复制链接

扫一扫