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

在移动端里，因为存在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. 释放Android的函数式能量（I）：Kotlin语言的Lambda表达式

    原文标题:Unleash functional power on Android (I): Kotlin lambdas 原文链接:http://antonioleiva.com/operator-o ...

  2. JavaScript标准参考教材（alpha）--笔记

    一.导论 二.基本语法 1.严格来说var a=1与a=1效果不太一样,delete命令无法删除前者. JavaScirpt是一种动态类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值. J ...

  3. C# 在Repeater 的ItemDataBound 如何转换e.Item.DataItem 的类型

    1.使用DataSet和DataTable绑定数据源时,用 DataRowView view = (DataRowView)e.Item.DataItem; 2.DataReader绑定数据源时,用 ...

  4. mysql数据类型

    一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC),以及近似数值数据类型(FLOAT,REAL,DOUB ...

  5. __weak与__block区别，深层理解两者区别

    准备工作 首先我定义了一个类 MyObject 继承 NSObject,并添加了一个属性 text,重写了description方法,返回 text 的值.这个主要是因为编译器本身对 NSString ...

  6. 安卓android sharepreference数据存储，保存输入框里面的数据

    Fragment 里面 使用轻量级的数据存储sharepreference ,代码思路清晰.保存输入框里面的数据,实现按钮保存. 个人项目中简单清晰代码: 赵存档 编写 ,可以参考: 类继承Fragm ...

  7. Linux环境搭建-在虚拟机中安装Centos7.0

    最近在空闲时间学习Linux环境中各种服务的安装与配置,都属于入门级别的,这里把所有的学习过程记录下来,和大家一起分享. 我的电脑系统是win7,所以我需要在win7上安装一个虚拟机-VMware,然 ...

  8. 理解Docker（4）：Docker 容器使用 cgroups 限制资源使用

    本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 ...

  9. hbase 权威指南笔记（二）

    这次我们先来讨论hbase的重试机制,为什么呐,因为最近公司最近也在做这方面的优化,所以就今天研究的一些成功记录一下. configuration.setInt("hbase.client. ...

  10. python 高级之面向对象初级

    python 高级之面向对象初级 本节内容 类的创建 类的构造方法 面向对象之封装 面向对象之继承 面向对象之多态 面向对象之成员 property 1.类的创建 面向对象:对函数进行分类和封装,让开 ...