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

在移动端里，因为存在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. 如果你的SharePoint出现了，状态服务问题，InfoPath无法正常使用

    Create a new ‘State Service’ Service Application using Powershell February 14, 2012Leave a commentGo ...

  2. iOS 性能调试

    性能调优的方式: 1.通过专门的性能调优工具 2.通过代码优化 1. 性能调优工具: 下面针对iOS的性能调优工具进行一个介绍: 1.1 静态分析工具–Analyze 相信iOS开发者在App进行Bu ...

  3. 架构从最简单的数据访问框架(ORM)到资源调度和治理中心(SOA)说起

    随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构当网站流量很小时,只需一个应用,将 ...

  4. 多War项目中静态文件的共享方案

    [原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 在互联网产品中,一般会有多个项目(Jar.WAR)组成一个产品线.这些WAR项目,因为使用相同的前端架构(jQuery.easyui等) ...

  5. favicon.ico 404

    favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favi ...

  6. properties属性文件工具类

    package xxx.business.utils; import org.apache.commons.configuration.ConfigurationException; import o ...

  7. SQL拼接字段数据

    查询语句: SELECT STUFF ( ( SELECT ',' + --分隔符 KeyID --查询字段 FROM #tmp --查询数据表 WITH(NOLOCK) --查询条件 FOR XML ...

  8. 使用Nexus搭建Maven本地仓库

    阅读目录 序 Nexus 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 在工作中可能存在有 ...

  9. Mac MySQL启动不了解决办法（MySQL卸载重新安装教程）

    一段时间没用MySQL,今天使用时突然发现启动不了了,怎么点start都没用,或者输入密码了  还是没用... 好急...找了一圈资料,没发现特别好的解决办法,只能使用大招了----->< ...

  10. linux基本知识2

    date:时间管理 linux时钟: 硬件时钟:hwclock -s:硬件时钟到系统时钟   -w:系统时钟到硬件时钟 系统时钟:date 如何查看是外部命令还是内部命令: type COMMAND ...