移动端上经常发现1px边框异常的粗，因此，决定用伪类配合css3来实现0.5px边框

代码如下：

 <!doctype html>

 <html lang="en">

 <head>

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

  <meta charset="UTF-8">

  <title>0.5 border</title>

  <style type="text/css">

  *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}

  ul{

   position: relative;

  }

  li{

   height: 60px;

   line-height: 60px;

   padding-left: 10px;

   position: relative;

   font-size: 20px;

  }

  li:after{

   content: "";

   display: block;

   position: absolute;

   left: -50%;

   width: 200%;

   height: 1px;

   background: #ededed;

   -webkit-transform:scale(0.5);

  }

  </style>

 </head>

 <body>

  <ul>

   <li>list-item1</li>

   <li>list-item2</li>

   <li>list-item3</li>

   <li>list-item4</li>

   <li>list-item5</li>

   <li>list-item6</li>

   <li>list-item7</li>

   <li>list-item8</li>

  </ul>

 </body>

 </html>

主要思路是利用伪类来实现border，先放大一倍，再利用css3缩小一倍。再用定位定到正确的位置即可

移动端页面0.5px border的实现的更多相关文章

  1. 移动端的0.5px

    最近写移动端页面写的比较多,边边基本上都是用的1px,视觉上也确实有点小粗,这不闲下来啦,具体的研究了下0.5px是怎么实现的,切记,这个效果只有在手机上才能看到效果的 利用了css3的缩放效果 &l ...

  2. 0.5px border 实现方案

    <div class='thin-border'></div> .thin-border { position: relative; width: 40px; height: ...

  3. 怎么在高清屏上画一条0.5px的边

    怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...

  4. 移动端安卓手机不能识别border 0.5px解决方案

    由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设 ...

  5. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  6. 移动端页面V2.0项目改版总结

    移动端页面已经进行的第三次改版,这个版本遇到的最大难题就是页面跳转的问题. 项目需求: 页面上有分别有优惠估价.我要估价.历史竞拍这三个Tab选项卡,当用户点击估价,选择品牌以后,前端需要去请求品牌接 ...

  7. 【移动端 Web】怎么循序渐进地开发一个移动端页面

    1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

  8. CSS3实现0.5px的边框

    前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...

  9. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

随机推荐

  1. 【翻译七】java-同步

    Synchronization Threads communicate primarily by sharing access to fields and the objects reference ...

  2. struts拦截器实现原理

    图1: 上1来源于Struts2官方站点,是Struts 2 的整体结构. 一个请求在Struts2框架中的处理大概分为以下几个步骤 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请 ...

  3. [读书笔记] Web 前端开发修炼之道

    原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...

  4. 无法打开包括文件:“windows.h”: No such file or directory

      VS2012 出现如下错误: 无法打开包括文件:"windows.h": No such file or directory   解决办法,将 C:\Program Files ...

  5. .net Session 详解

    (一) 描述当用户在 Web 应用程序中导航 ASP.NET 页时,ASP.NET 会话状态使您能够存储和检索用户的值.HTTP 是一种无状态协议.这意味着 Web 服务器会将针对页面的每个 HTTP ...

  6. java + jni + mingw实例开发（基于命令行窗口模式）

    java+ jni + mingw 参考网址: http://wenku.baidu.com/link?url=9aQ88d2ieO7IgKLlNhJi5d3mb3xwzbezLPzSIX3ixz4_ ...

  7. CF731C Socks并查集(森林),连边，贪心，森林遍历方式，动态开点释放内存

    http://codeforces.com/problemset/problem/731/C 这个题的题意是..小明的妈妈给小明留下了n只袜子,给你一个大小为n的颜色序列c 代表第i只袜子的颜色,小明 ...

  8. mysql注入小测试

    转自:http://www.jb51.net/article/46163.htm 在开发网站的时候,出于安全考虑,需要过滤从页面传递过来的字符.通常,用户可以通过以下接口调用数据库的内容:URL地址栏 ...

  9. 有损FLV视频的画面宽高比修改方案

    问题背景: 需要向网站上发布一条视频新闻,就是新闻只有一段视频.上面给的是一个FLV的视频,大小接近200M,差不多200分钟吧.本来觉得很简单的事,直接上传发布就完了,但是一波三折啊……第一轮上传时 ...

  10. scau 8637 阶乘与因子 筛素数

    时间限制:500MS  内存限制:1000K提交次数:189 通过次数:46 题型: 编程题   语言: G++;GCC Description 游戏玩了很久总会厌的,连Lyd的蚂蚁都被放生了.... ...