0.5px的边框线遇到的坑

最新推荐文章于 2023-06-11 17:51:31 发布

小手冰凉007

最新推荐文章于 2023-06-11 17:51:31 发布

阅读量442

点赞数

本文链接：https://blog.csdn.net/weixin_44437258/article/details/109070037

版权

奇怪的需求，要0.5px的边框线，有一个巨简单的方法

第一种：使用box-shadow的方法

如图
在这里插入图片描述

box-shadow: 0 0 0 0.5px black;

一句话搞定
兼容问题
这种方式在chrome可以，
但是firefox会出现如下情况（将其设置为0.6就会恢复正常，但是设置为0.4,box-shadow就全部消失了）
这里有个坑
就是在移动端（pc端暂时没有发现）有时候要么上面缺一点，要么下边缺一点，有些手机会有圆角发虚的情况，不知道什么原因，经过摸索，层级z-index设置高一点就ok了

第二种：使用伪类after

如图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="border">

		</div>
		<div id="border-B">

		</div>
	</body>
</html>
<style type="text/css">
	div {
		width: 50px;
		height: 50px;
	}

	#border {
		border-bottom: 1px solid #000000;
	}

	#border-B {
		position: relative   //这里必须必须必须要用定位
	}

	#border-B::after {
		content: " ";
		position: absolute;
		z-index: 3;
		left: 0;
		bottom: -1px;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #000000;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5)
	}
</style>

小手冰凉007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0.5px的边框线遇到的坑

奇怪的需求，要0.5px的边框线，有一个巨简单的方法，怕我忘了记录一下使用box-shadow的方法box-shadow: 0 0 0 0.5px black;一句话搞定兼容问题这种方式在chrome可以，但是firefox会出现如下情况（将其设置为0.6就会恢复正常，但是设置为0.4,box-shadow就全部消失了）...
复制链接

扫一扫