CSS3 移动端 1PX 线变成0.5PX

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

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);}…

移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法

其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法原理:其实他们都是通过css3的媒体查询来实现的步骤思路: 1.给目标元素进行相对定位 2.给目标元素添加伪元素 ::after/before 并进行绝对定位 3.判断DPI 1DPI 100% --------------使用媒体查询 2DPI 200% 3DPI 300% 4.通过css3中的transform scale等比缩放下面是具体…

CSS3实现0.5px的边框

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

移动端页面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"> <m…

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…

移动端的0.5px

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

CSS3实现0.5px边框

用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…