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

在移动端里，因为存在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. 使用AxisHelper帮助理解View and Data API中的坐标系统

    大家使用View and Data API做三维模型开发,必然首先要理解View and Data API的坐标系统,即XYZ三个轴向分别是怎么定义的.Three.js里面提供了一个AxisHelpe ...

  2. MVC 后台管理框架 FineUIMvc 在线示例

     FineUIMvc 在线示例 基础版下载

  3. ORA-00600: internal error code, arguments: [4194]

    使用PlateSpin复制出来的一数据库服务器(Oracle 10g)在启动数据库实例时遇到"ORA-00600: internal error code, arguments: [4194 ...

  4. JavaScript错误/异常处理

    JavaScript Try...Catch 语句 介绍:JavaScript中的try...carch语句的作用和C#中的try...catch语句的作用一样, 都是捕获并处理异常. 语法: try ...

  5. ORACLE分区表梳理系列（一）- 分区表概述、分类、使用方法及注意事项

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  6. linux基础：第三关课前考试题整理

    1.如何取得/etc/hosts 文件的权限对应的数字内容,如-rw-r--r-- 为 644, 要求使用命令取得644 这样的数字. [root@server ~]# stat /etc/hosts ...

  7. vs2013给项目统一配置boost库

    1.打开项目,然后点击菜单中的 视图->其他窗口->属性管理器 2. 打开属性管理器,点击项目前的箭头,展开项目,找到debug或者release下面的Microsoft.Cpp.Win3 ...

  8. 【转】（超详细）jsp与servlet之间页面跳转及参数传递实例

    初步学习JavaEE,对其中jsp与Servlet之间的传值没弄清楚,查看网上资料,发现一篇超详细的文章,收获大大,特此记录下来.具体链接:http://blog.csdn.net/ssy_shand ...

  9. ORACLE 利用 REPLACE函数替换字段字符串

    REPLACE(string,s1,s2) string 希望被替换的字符或变量 s1 被替换的字符串 s2 要替换的字符串 SQL> select replace(he love you,he ...

  10. python3条件控制if

    Python条件语句是通过一条或多条语句的执行结果(为真或假)来决定执行哪部分代码. if语句 if语句的一般形式如下: if 条件1: 语句1 elif 条件2: 语句2 else: 语句3 其意思 ...