CSS3 移动端 1PX 线变成0.5PX】的更多相关文章

.line1 {position:relative} .line1:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #e0e0e0;-webkit-transform:scaleY(.5);transform:scaleY(.5);}…
其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法 原理:其实他们都是通过css3的媒体查询来实现的 步骤思路: 1.给目标元素进行相对定位 2.给目标元素添加伪元素 ::after/before  并进行绝对定位 3.判断DPI   1DPI   100%   --------------使用媒体查询 2DPI   200% 3DPI   300% 4.通过css3中的transform scale等比缩放 下面是具体…
前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px的方法: 方法一:利用渐变 关于渐变可以看下面两篇文章做深入了解: CSS3 渐变(Gradients) 深入理解CSS3 gradient斜向线性渐变 实现原理: 把元素的伪类高度设为1px,背景渐变,一半有颜色,一半透明.   线上案例:百度糯米(没有改版的话)   代码如下: <!DOCTYP…
移动端上经常发现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"> <m…
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty…
最近写移动端页面写的比较多,边边基本上都是用的1px,视觉上也确实有点小粗,这不闲下来啦,具体的研究了下0.5px是怎么实现的,切记,这个效果只有在手机上才能看到效果的 利用了css3的缩放效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0.5px</title> </head> <…
用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5px的边框需求. .content{ position:relative; } .content:before{ content: '';position: absolute;width: 200%;height: 1px;bottom: 0;border-bottom: 1px solid #d6…
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android下几乎所有的浏览器都会把0.5识别为0,即无边框状态. 原理 原理就是给需要加边框的元素插入一个伪类,伪类采用绝对定位,然后对伪类添加1px边框,最后进行0.5倍缩放.transform的缩放和旋转默认都是按照元素的中心点来操作的outline元素在缩放0.5之前尺寸就是红框元素,缩放后,位置到了红…
由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设为1px通过-webkit-transform:scale(.5)来进行缩小一倍,这样就得到border为0.5的边框, 案例: .ce{ position: relative; } .ce:after{ content: ""; display: block; position: abs…
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 解决边框变粗的办法 1.0.5px边框 在2014年的 WWDC,“设计响应的Web体验” 一…