总结一下各种0.5px的线

whinc 发布于2019-08-30 15:53 / 781人阅读

摘要：在端用的边框线，看起来还好，但在手机端看起来就很难看了，而的分割线会有种精致的感觉。的缩放和旋转默认都是按照元素的中心点来操作的元素在缩放之前尺寸就是红框元素，缩放后，位置到了红框中心，为了使之依然在左上角，缩放之前我们需进行的位移。

在PC端用1px的边框线，看起来还好，但在手机端看起来就很难看了，而0.5px的分割线会有种精致的感觉。用普通写法border:solid 0.5px red;iPhone可以正常显示，android下几乎所有的浏览器都会把0.5识别为0，即无边框状态.

原理

原理就是给需要加边框的元素插入一个伪类，伪类采用绝对定位，然后对伪类添加1px边框，最后进行0.5倍缩放。transform的缩放和旋转默认都是按照元素的中心点来操作的
outline元素在缩放0.5之前尺寸就是红框元素，缩放后，位置到了红框中心，为了使之依然在左上角，缩放之前我们需进行left：-50%；top：-50%的位移。

0.5px边框


  
    HELLO WORLD

副作用

当用伪类的绝对定位来实现了边框后，我们在first类和first-div类上的点击事件会失效，因为此时的伪类是绝对定位，而且长宽等于父类元素的长宽，是脱离了文档流覆盖在父类上的，伪类不是真实的DOM元素，没有js点击事件

解决方案

再写一个绝对定位元素，覆盖在父元素上，层级优先级要高一点


  
    HELLO WORLD

0.5px圆角边框


  
    HELLO WORLD

0.5px左边线


  
    HELLO WORLD

0.5px右边线


  
    HELLO WORLD

0.5px底部线


  
    HELLO WORLD

GPU云服务器云服务器 oracle8.0.5下载 html表格的线 html线最细的线 px

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116779.html

谈一谈移动端1px的问题

摘要：今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条的线。上面的结论我在端谷歌浏览器的设备模拟器里证实了有效，但是安卓和真机并没有试过。起因最近一个月都在准备校招，所以没什么时间写博客。今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条1px的线。这个问题我模糊地记得之前看过相关文章，但是我清楚地记得当时自己脑子一片空白。是的，一面挂了，但...

qianfeng 2019-08-30 15:53 评论0 收藏0
Css-移动端适配总结

摘要：这种使用简单，但是兼容性不太好。这种颜色有阴影，估计过不了设计大佬的那关。最后会把对应的编译出来，这种兼容性好，就是依赖于插件。这种兼容好，但是会和伪类冲突，也是我司采用的方式。前言工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcss pxdevice px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC端本文主要...

whinc 2019-08-29 18:32 评论0 收藏0
Css-移动端适配总结

摘要：这种使用简单，但是兼容性不太好。这种颜色有阴影，估计过不了设计大佬的那关。最后会把对应的编译出来，这种兼容性好，就是依赖于插件。这种兼容好，但是会和伪类冲突，也是我司采用的方式。前言工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcss pxdevice px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC端本文主要...

codeGoogle 2019-08-23 16:47 评论0 收藏0
移动端H5页面中1px边框的几种解决方法

问题提出这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的：设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的我：？？？？我写的是1px呀，不信你看。（说着拿出了css代码设计师：不对啊我眼睛看来这个边框比我设计稿上粗很多，看起来好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（边说边改了代码...

enda 2019-08-29 16:07 评论0 收藏0