移动端的0.5px

最近写移动端页面写的比较多，边边基本上都是用的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

最新文章

热门文章