移动端的0.5px
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端的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的主要内容，如果未能解决你的问题，请参考以下文章