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

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

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

实现方法代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">

 <meta content="yes" name="apple-mobile-web-app-capable">

 <meta content="black" name="apple-mobile-web-app-status-bar-style">

 <meta content="telephone=no" name="format-detection">

 <meta content="email=no" name="format-detection">

 <title>1px的边框问题</title>

 <style type="text/css">

 .line {

     height: 50px;

     width: 200px;

     line-height: 50px;

     background-color: #CCC;

     text-align: center;

     border-bottom:1px solid red;

     margin-bottom: 20px;

 } 

 .scale {

     height: 50px;

     width: 200px;

     line-height: 50px;

     background-color: #CCC;

     text-align: center;

     margin-bottom: 20px;

 }

 .scaleV2 {

     height: 50px;

     width: 200px;

     line-height: 50px;

     text-align: center;

     background-color: #CCC;

     margin-bottom: 20px;

     border-radius: 5px;

 }

 .topLine,.bottomLine,.leftLine,.rightLine,.borderLine,.radiusLine{

     position: relative;

 }

 .bottomLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     bottom: 0;

     height: 1px;

     padding-bottom: 1px;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left bottom;

     transform-origin: left bottom;

 }

 .topLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     top: 0;

     height: 1px;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left bottom;

     transform-origin: left bottom;

 }

 .leftLine:after {

     position: absolute;

     content: '';

     width: 1px;

     left: 0;

     top: 0;

     height: 200%;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left bottom;

     transform-origin: left top;

 }

 .rightLine:after {

     position: absolute;

     content: '';

     width: 1px;

     right: 0;

     top: 0;

     height: 200%;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: center bottom;

     transform-origin: right top;

 }

 .borderLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     top: 0;

     height: 200%;

     border: 1px solid red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left top;

     transform-origin: left top;

 }

 .radiusLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     top: 0;

     height: 200%;

     border: 1px solid red;

     border-radius: 10px;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left top;

     transform-origin: left top;

 }

 </style>

 </head>

 <body>

 <div class="line">1px</div>

 <div class="scale topLine">0.5px 上边框</div>

 <div class="scale bottomLine">0.5px 下边框</div>

 <div class="scale leftLine">0.5px 左边框</div>

 <div class="scale rightLine">0.5px 右边框</div>

 <div class="scale borderLine">0.5px 边框</div>

 <div class="scaleV2 radiusLine">0.5px 圆角边框</div>

 </body>

 </html>

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

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

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

.btn:before {

    content: '';

    position: absolute;

    top: -50%;

    bottom: -50%;

    left: -50%;

    right: -50%;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    border-style: solid;

    border-width: 1px;

    border-color: red;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

实现.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. JS函数声明的问题

    三个例子 var a = 10; 2 function test(){ 3 a = 100; 4 console.log(a); 5 console.log(this.a); 6 var a; 7 c ...

  2. Dynamics CRM 2015-如何修改Optionset Default Value

    在日常工作中,我们时不时会遇到在CRM测试环境上添加Optionset的时候,Default Value是某个值,但换到Production环境或者其他环境,添加的时候,Default Value可能 ...

  3. CALayer的m34 - 三维透视效果

    CATransform3D transform = CATransform3DIdentity; // 修改transform的m34达到透视效果 // - 1.0 / (500 ~ 1000 效果最 ...

  4. HTML5-电影影评网

    学习完了HTML5的新标签,然后结合之前的案例做了第一个小案例.自我感觉良好.下面我来展示一下图片 这是我浏览其他网站的时候以为发现的新功能可以运行代码,这是运行之后截得图片.自我感觉照片还是蛮高大上 ...

  5. ContentProvider中央档案馆,以及获取联系人电话的示例

    Android官方文档介绍的数据存储方式共有五种,sqlite,SharedPreferences,网络存储,外储存储,文件存储,但是这些数据都无法进行共享,那么我们就引入了今天的主角:Content ...

  6. SQL Server 2012新增和改动DMV

    SQL Server 2012新增和改动DMV  系统视图 说明 sys.dm_exec_query_stats (Transact-SQL) 添加了四列,以帮助排除长时间运行的查询所存在的问题. 可 ...

  7. Rocksdb引擎记录格式

    Rocksdb是一个kv引擎,由facebook团队基于levelDB改进而来,Rocksdb采用LSM-tree存储数据,良好的读写特性以及压缩特性使得其非常受欢迎.此外,Rocksdb引擎作为插件 ...

  8. Java 相关书籍

    Effective Java 中文第二版: Java并发编程实践: Java核心技术(原书第8版)卷I_基础知识: Java核心技术(原书第8版)卷II_高级特性: 深入理解Java虚拟机 JVM高级 ...

  9. centos6 系统安装 system-config-kickstart 工具

    kickstart 能实现 linux 系统的自动化安装,需要设置 ks.cfg 文件,而这个 ks.cfg 文件的生成最好使用 system-config-kickstart 工具生成,比较准确,也 ...

  10. 连载《一个程序猿的生命周期》-《发展篇》 - 3.农民与软件工程师，农业与IT业

    相关文章:随笔<一个程序猿的生命周期>- 逆潮流而动的“叛逆者”        15年前,依稀记得走出大山,进城求学的场景.尽管一路有父亲的陪伴,但是内心仍然畏惧.当父亲转身离去.准备回到 ...