半转的意思是借鉴参考，搬砖，加了一些自己的想法。

在移动端里，因为存在2倍像素的问题，所以很多时候，移动端上的1px边框并不是意义上的。从下图红色框看到dpr：2.0 ，表示1px等于2倍的物理像素。

网上找了一下，自己总结了一下。

实现方法代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
  6.  <meta content="yes" name="apple-mobile-web-app-capable">
  7.  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8.  <meta content="telephone=no" name="format-detection">
  9.  <meta content="email=no" name="format-detection">
  10.  <title>1px的边框问题</title>
  11.  <style type="text/css">
  12.  .line {
  13.      height: 50px;
  14.      width: 200px;
  15.      line-height: 50px;
  16.      background-color: #CCC;
  17.      text-align: center;
  18.      border-bottom:1px solid red;
  19.      margin-bottom: 20px;
  20.  } 
  21.  
  22.  .scale {
  23.      height: 50px;
  24.      width: 200px;
  25.      line-height: 50px;
  26.      background-color: #CCC;
  27.      text-align: center;
  28.      margin-bottom: 20px;
  29.  }
  30.  .scaleV2 {
  31.      height: 50px;
  32.      width: 200px;
  33.      line-height: 50px;
  34.      text-align: center;
  35.      background-color: #CCC;
  36.      margin-bottom: 20px;
  37.      border-radius: 5px;
  38.  
  39.  }
  40.  .topLine,.bottomLine,.leftLine,.rightLine,.borderLine,.radiusLine{
  41.      position: relative;
  42.  }
  43.  .bottomLine:after {
  44.      position: absolute;
  45.      content: '';
  46.      width: 200%;
  47.      left: 0;
  48.      bottom: 0;
  49.      height: 1px;
  50.      padding-bottom: 1px;
  51.      background-color: red;
  52.      -webkit-transform: scale(.5);
  53.      transform: scale(.5);
  54.      -webkit-transform-origin: left bottom;
  55.      transform-origin: left bottom;
  56.  }
  57.  .topLine:after {
  58.      position: absolute;
  59.      content: '';
  60.      width: 200%;
  61.      left: 0;
  62.      top: 0;
  63.      height: 1px;
  64.      background-color: red;
  65.      -webkit-transform: scale(.5);
  66.      transform: scale(.5);
  67.      -webkit-transform-origin: left bottom;
  68.      transform-origin: left bottom;
  69.  }
  70.  .leftLine:after {
  71.      position: absolute;
  72.      content: '';
  73.      width: 1px;
  74.      left: 0;
  75.      top: 0;
  76.      height: 200%;
  77.      background-color: red;
  78.      -webkit-transform: scale(.5);
  79.      transform: scale(.5);
  80.      -webkit-transform-origin: left bottom;
  81.      transform-origin: left top;
  82.  }
  83.  .rightLine:after {
  84.      position: absolute;
  85.      content: '';
  86.      width: 1px;
  87.      right: 0;
  88.      top: 0;
  89.      height: 200%;
  90.      background-color: red;
  91.      -webkit-transform: scale(.5);
  92.      transform: scale(.5);
  93.      -webkit-transform-origin: center bottom;
  94.      transform-origin: right top;
  95.  }
  96.  
  97.  .borderLine:after {
  98.      position: absolute;
  99.      content: '';
  100.      width: 200%;
  101.      left: 0;
  102.      top: 0;
  103.      height: 200%;
  104.      border: 1px solid red;
  105.      -webkit-transform: scale(.5);
  106.      transform: scale(.5);
  107.      -webkit-transform-origin: left top;
  108.      transform-origin: left top;
  109.  }
  110.  
  111.  .radiusLine:after {
  112.      position: absolute;
  113.      content: '';
  114.      width: 200%;
  115.      left: 0;
  116.      top: 0;
  117.      height: 200%;
  118.      border: 1px solid red;
  119.      border-radius: 10px;
  120.      -webkit-transform: scale(.5);
  121.      transform: scale(.5);
  122.      -webkit-transform-origin: left top;
  123.      transform-origin: left top;
  124.  }
  125.  </style>
  126.  </head>
  127.  
  128.  <body>
  129.  <div class="line">1px</div>
  130.  <div class="scale topLine">0.5px 上边框</div>
  131.  <div class="scale bottomLine">0.5px 下边框</div>
  132.  <div class="scale leftLine">0.5px 左边框</div>
  133.  <div class="scale rightLine">0.5px 右边框</div>
  134.  <div class="scale borderLine">0.5px 边框</div>
  135.  <div class="scaleV2 radiusLine">0.5px 圆角边框</div>
  136.  </body>
  137.  
  138.  </html>

其实还是发现有一些的问题。

就是在在圆角的情况下会有写漏空。

看了一个大神的博客，他是用这样的一种方法的。没有这样的问题。

  1. .btn:before {
  2.     content: '';
  3.     position: absolute;
  4.     top: -50%;
  5.     bottom: -50%;
  6.     left: -50%;
  7.     right: -50%;
  8.     -webkit-transform: scale(0.5);
  9.     transform: scale(0.5);
  10.     border-style: solid;
  11.     border-width: 1px;
  12.     border-color: red;
  13.     -webkit-border-radius: 10px;
  14.     border-radius: 10px;
  15. }

实现.5px的圆角边框

.5px的边框，看起来看神奇，这里感谢蓝叔提供的方法。

原理：先定义1px的圆角边框，然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变)，然后再使用transform:scale(0.5)缩放为原来的0.5倍

转：http://peunzhang.cnblogs.com/

[半转]1px边框 移动端的更多相关文章

  1. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  2. 移动端视网膜（Retina）屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  3. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  4. 移动端1px边框实现

    问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...

  5. 7种方法实现移动端Retina屏幕1px边框效果

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  6. 移动端1px边框问题

    用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...

  7. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  8. CSS3实现小于1px的边框(移动端)

    <!doctype html> <html lang="en"> <head> <meta content="width=dev ...

  9. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

随机推荐

  1. 关于python字符串连接的操作

    python字符串连接的N种方式 注:本文转自http://www.cnblogs.com/dream397/p/3925436.html 这是一篇不错的文章 故转 python中有很多字符串连接方式 ...

  2. 【JS基础】数组

    filter() 返回数组中的满足回调函数中指定的条件的元素. array1.filter(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn ...

  3. CSS3之过渡及2D变换

    transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...

  4. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  5. css基础

    一. web标准化 (1).内容与样式,行为分离 (2).html用来定义语义内容,以及内容的结构 (xhtml) (3).xhtml标准 a.xhtml 必须强制指定文档类型 DocType,HTM ...

  6. xcode8 storyboard 控件显示错位

    升级xcode8 后选择device 为6s 出现上面的情况,控件显示异常.使用Update Frame 显示正常.不能选择Update Constraints   如果误选 commend + Z ...

  7. kindle型号

    这篇文章为 Kindle 新手解决三个问题:怎么辨别Kindle 型号?通过 Kindle 外观判断准确吗?Kindle序列号在那里? 贴吧吧友提问的原话"在咸鱼看到一台,那哥们说也不知道K ...

  8. listview侧滑删除

    自定义Listview,向左滑动,右边刚好显示删除按钮: public class SlideListView extends ListView { private int mScreenWidth; ...

  9. 《明解c语言》已看完，练习代码此奉上

    2016年9月20日至2016年11月12日,从学校图书馆借来的<明解c语言>看完了. 大三第一个学期,前8周,有c语言程序设计的课.课本是学校里的老师编写出版的,为了压缩空间,减少页面, ...

  10. 刷新页面时 select值保持不变

    刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...