移动端页面0.5px border的实现
移动端上经常发现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的实现的更多相关文章
- 移动端的0.5px
最近写移动端页面写的比较多,边边基本上都是用的1px,视觉上也确实有点小粗,这不闲下来啦,具体的研究了下0.5px是怎么实现的,切记,这个效果只有在手机上才能看到效果的 利用了css3的缩放效果 &l ...
- 0.5px border 实现方案
<div class='thin-border'></div> .thin-border { position: relative; width: 40px; height: ...
- 怎么在高清屏上画一条0.5px的边
怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...
- 移动端安卓手机不能识别border 0.5px解决方案
由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设 ...
- 移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...
- 移动端页面V2.0项目改版总结
移动端页面已经进行的第三次改版,这个版本遇到的最大难题就是页面跳转的问题. 项目需求: 页面上有分别有优惠估价.我要估价.历史竞拍这三个Tab选项卡,当用户点击估价,选择品牌以后,前端需要去请求品牌接 ...
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- CSS3实现0.5px的边框
前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...
- css写出0.5px边框（一）
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
随机推荐
- Delphi如何处理不同类型的文件
参考:http://www.cnblogs.com/railgunman/articles/1800318.html 程序设计当中,我们时常遇到需要处理文件.目录及驱动器的情况,这里将对如何处理不同类 ...
- SQL高级查询技巧（两次JOIN同一个表，自包含JOIN，不等JOIN）
掌握了这些,就比较高级啦 Using the Same Table Twice 如下面查询中的branch字段 SELECT a.account_id, e.emp_id, b_a.name open ...
- 关于strcpy_s
#include"stdafx.h" #include<iostream> #include<cstring> int main() { using nam ...
- 攻城狮在路上（叁）Linux（十九）--- 磁盘分区
磁盘分区使用fdisk命令,该命令仅root有使用权限. 磁盘分区的一般步骤: 1.首先用df命令查看设备名 df -h; 2.fdisk /dev/sda; <== 按m显示help d:删除 ...
- 简单的redis 性能测试
C:\Users\luhan.qian\Desktop\Tools\redis C:\Users\luhan.qian\Desktop\Tools\redis $ redis-benchmark.ex ...
- 2-06使用SQL语句创建数据库3
向现有数据库中添加文件组和数据文件几种方式以及步骤: 第一种:在视图下添加文件组和数据文件. 添加文件组的步骤: 右击你想要添加文件组的数据库点属性,然后点文件组就可以添加. 添加数据文件的步骤: 下 ...
- hdu 5289 rmp+二分+枚举后界 or单调队列 ****
好题~~ 给你n个数和k,求有多少的区间使得区间内部任意两个数的差值小于k,输出符合要求的区间个数,枚举后界~~ 又是一种没见过的方法,太弱了/(ㄒoㄒ)/~~ #include <cstdio ...
- DateTime时间格式
DateTime dt = DateTime.Now; Label1.Text = dt.ToString();//2005-11-5 13:21:25 Label2.Text = dt.ToFile ...
- cocos2dx游戏开发——微信打飞机学习笔记（二）——游戏框架
一.游戏的基本框架: WelcomeScene ——> GameScene ——> GameOverScene || ...
- 关于Char类型数据做cout输出
当用cout 或者 printf()对char 或者 unsigned char类型数据进行输出的时候,默认输出的都是字符,而不是字符对应的数值.如果要输出数值,必须做int 类型数据的强制转换. 例 ...