首页 > 代码库 > 移动端的0.5px

移动端的0.5px

2024-09-04 07:23:15   221人阅读

最近写移动端页面写的比较多，边边基本上都是用的1px，视觉上也确实有点小粗，这不闲下来啦，具体的研究了下0.5px是怎么实现的，切记，这个效果只有在手机上才能看到效果的

利用了css3的缩放效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>0.5px</title>
</head>
<style>
	.content{
   		position:relative;
   		width: 200px;
   		height: 200px;
   		background: #eee;
	}
	.content:before{
		content: ‘‘;
		position: absolute;
		width: 200%;
		height: 1px;
		bottom: 0;
		border-bottom: 1px solid red;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(.5,.5);
		transform: scale(.5,.5);
		-webkit-box-sizing: border-box;
		box-sizing: border-box
	}

	
	.bd-all{
	  position:relative;
	  margin-top: 10px;
	}

	.bd-all:after{
	  content: "  ";
	  position: absolute;
	  left: 0;
	  top: 0;
	  z-index:-1;
	  width: 200%;
	  height:200%;
	  border:1px solid #e0e0e0;
	  -webkit-transform-origin: 0 0;
	  transform-origin: 0 0;
	  -webkit-transform: scale(.5, .5);
	  transform: scale(.5, .5);
	}
	
</style>
<body>
	<div class="content"></div>

<!-- 四周都是0.5px的 -->
	<div class=‘bd-all‘>你好</div>  
</body>
</html>

　　如有错误之处，请评论中之出，谢谢指出错误的亲们

欢迎加入前端开发交流群：qq：143206839

移动端的0.5px


联系
我们