移动端0.5px的实现

方案一:

.left-list > ul li {
position:relative;
height: 1.22rem;
line-height: 1.22rem;
font-size: 0.24rem;
color: #555555;
}
.left-list > ul li:before {
content: ‘‘;
position: absolute;
left:0;
width: 200%;
height: 200%;
transform-origin: 0 0;
transform: scale(0.5);
border-style: solid;
border-width: 1px 0 0 0;
border-color: #e5e5e5;
box-sizing: border-box;
}

方案二:

nav ul li{
position:relative;
float: left;
color: #9a9a9a;
font-size: 0.24rem;
text-align: center;
padding: 3px 5px;
border-radius: 0.03rem;
margin-left: 0.21rem;
margin-bottom: 0.18rem;
}
nav ul li: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: #9a9a9a;
-webkit-border-radius: 0.12rem;
border-radius: 0.12rem;
}

方案三:

ul{
position: relative;
}
li{
 height: 60px;
 line-height: 60px;
 padding-left: 10px;
position: relative;
font-size: 20px;
width : 20%;
height: 20%;
}
li:after{
content: "";
display: block;
position: absolute;
left: -50%;
width: 200%;
height: 1px;
background: red;
-webkit-transform:scale(0.5);
}

0.5px 存在很多坑。只显示下边框的时候会存在断点。即某个li元素边款显示不出来。

时间: 2024-10-25 08:11:06

移动端0.5px的实现的相关文章

移动端的0.5px

最近写移动端页面写的比较多,边边基本上都是用的1px,视觉上也确实有点小粗,这不闲下来啦,具体的研究了下0.5px是怎么实现的,切记,这个效果只有在手机上才能看到效果的 利用了css3的缩放效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0.5px</title> </head> <

移动端页面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"&g

CSS3实现0.5px的边框

前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px的方法: 方法一:利用渐变 关于渐变可以看下面两篇文章做深入了解: CSS3 渐变(Gradients) 深入理解CSS3 gradient斜向线性渐变 实现原理: 把元素的伪类高度设为1px,背景渐变,一半有颜色,一半透明. 线上案例:百度糯米(没有改版的话) 代码如下: <!DOCTYPE ht

div背景透明内容不透明与0.5PX边框兼容设置

1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流.   里层设置两个div,一个用来书写内容,一个用来专门设置边框 HTML代码 : <!-- position_box用来定位,控制该区域在原文档流中的位置 --> <div class="po

css3缩放功能实现0.5px的边框

0.5px 的像素在移动端的要求还是需要的. 在网上找了一个具体的实现办法,核心就是css3的缩放功能. 加box-sizing:border-box:是为了边框可以一起缩放. .border:after{ content: ""; position: absolute; border: 1px solid red; width: 200%; height: 200%; transform: 0 0; transform: scale(0.5,0.5); box-sizing: bor

移动手机端0.5px线条

添加对应的类名,在pc算线条展示1px,2c端展示0.5px效果 /* 1px hack */ .ui-border-t { border-top: 1px solid #e0e0e0; } .ui-border-b { border-bottom: 1px solid #e0e0e0; } .ui-border-tb { border-top: #e0e0e0 1px solid; border-bottom: #e0e0e0 1px solid; background-image: none

边框0.5px的实现方法

原理: css3 的缩放   ---->    transform: scale() 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 200px; width: 200px; margin: 5

ios实现0.5px的几种方法,安卓设备也实用,安卓和ios实现细线边框

//判断ios版本 ,设置一个全局的样式名 hairlines,通过运用样式名,来给不同版本ios添加样式,ios版本不同对于0.5px显示效果也区别很大,同一个设备也是显示出五花八门的效果.//安卓不需要判断版本,可以跳过js判断. <script type="text/javascript">//js放在头部head区域 if (/iP(hone|od|ad)/.test(navigator.userAgent)) { var v = (navigator.appVer

css3写出0.5px的边框

一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty