移动端页面0.5px border的实现

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

代码如下：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 5  <meta charset="UTF-8">
 6  <title>0.5 border</title>
 7  <style type="text/css">
 8  *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}
 9  ul{10   position: relative;
11  }
12  li{13   height: 60px;
14   line-height: 60px;
15   padding-left: 10px;
16   position: relative;
17   font-size: 20px;
18  }
19  li:after{20   content: "";
21   display: block;
22   position: absolute;
23   left: -50%;
24   width: 200%;
25   height: 1px;
26   background: #ededed;
27   -webkit-transform:scale(0.5);
28  }
29  </style>
30 </head>
31 <body>
32  <ul>
33   <li>list-item1</li>
34   <li>list-item2</li>
35   <li>list-item3</li>
36   <li>list-item4</li>
37   <li>list-item5</li>
38   <li>list-item6</li>
39   <li>list-item7</li>
40   <li>list-item8</li>
41  </ul>
42 </body>
43 </html>

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

转载于:https://www.cnblogs.com/raoyunxiao/p/4241982.html

移动端页面0.5px border的实现相关推荐

移动端实现0.5px的实用方案
我们知道,理论上px的最小单位是1,但在设置px值时,直接设置0.5px不同浏览器的差异比较大,并且我们看到不同系统的不同浏览器对小数点的px有不同的处理.Chrome会把0.5px四舍五入变成了1p ...
css：移动端实现1px、0.5px的细线
实现效果在线体验: https://mouday.github.io/front-end-demo/1px.html 实现代码 <body><style>* {margin: ...
html5给div设置单边界,纯CSS实现border的0.5px设置
移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔 ...
HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域,确定div 测量各个区域的宽高 ...
[css] 怎么实现移动端的边框0.5px？
[css] 怎么实现移动端的边框0.5px? 一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta vi ...
前端页面设计0.5px的线
首先,我们先来了解几个概念. 物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. ...
移动端0.5px的实现
方案一: .left-list > ul li { position:relative; height: 1.22rem; line-height: 1.22rem; font-size: 0. ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
静态pc端页面，你一定用得上的技巧
目录一.CSS盒子布局 1. 内边距 padding 2.外边距 margin 3.案例 4.边框形状 5.阴影二.浮动 1.浮动特性 2.清除浮动 3.css书写顺序三.css定位 1.==定 ...

移动端页面0.5px border的实现

移动端页面0.5px border的实现相关推荐

最新文章

热门文章