.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top:;
right:;
bottom:;
left:;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}

retina屏实现border边框1px的更多相关文章

  1. Retina屏实现1px边框

    问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...

  2. Retina屏下1px border

    layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...

  3. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...

  4. Retina 屏移动设备 1px解决方案

    做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePix ...

  5. 移动端 Retina屏 各大主流网站1px的解决方案

    Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...

  6. 【转载】Retina屏的移动设备如何实现真正1px的线?

    文章转载自 酷勤网 http://www.kuqin.com/ 原文链接:http://www.kuqin.com/shuoit/20150530/346322.html 原文摘要:前些日子总被人问起 ...

  7. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  8. Retina屏的移动设备如何实现真正1px的线

    前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… ...

  9. 移动端Retina屏boder 1px显示为2px或3px的解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...

随机推荐

  1. 【翻译】MVC Music Store 教程-概述(三)

    Controller 与传统的Web框架,将传入的URL通常映射到磁盘上的文件.例如:一个URL请求“/Products.aspx" 或"/Products.php”是处理一个Pr ...

  2. OSG显示文字——自定义显示文字函数

    #include <Windows.h> #include <osg/Geode> #include <osg/Geometry> #include <osg ...

  3. 提高Delphi的编译速度(bpl和bcp)

    delphi的编译速度提高(一) 此博文为原创,转载请注明出处 作者 :二娃 此博文的内容我曾经回答群内和论坛内的网友提问时回答过,现在写第一部分,第二部分,我再给出一个终极的提高速度的方法 我用过d ...

  4. 2016 Multi-University Training Contest 1 总结

    算是组队后第一次打比赛吧. 09题开始就有人过了,看到题目,这不是轮廓线DP的裸题么?!!,一发WA告终,然后发现题目是有改动的.还是太心急了. 然后我读了第一题,是最小生成树求期望距离,我把题意说了 ...

  5. HDU 3466 Proud Merchants(01背包)

    这道题目看出背包非常easy.主要是处理背包的时候须要依照q-p排序然后进行背包. 这样保证了尽量多的利用空间. Proud Merchants Time Limit: 2000/1000 MS (J ...

  6. Pig Latin儿童黑话(java)

     ●假设单词以辅音字母開始,将词首的辅音字母字符串(第一个元音字母前的全部字母)从单词的开头移动到末尾,然后加上后缀ay,这样就形成了它的pig  latin. ●假设单词以元音字母開始,仅仅须要 ...

  7. 虎扯:纯css3各方向小三角的制作原理分析

    入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则: One:不浪费自己的时间, Tow:不浪费读者的时间, 第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!! 咱们今天来做一个居家旅行必 ...

  8. 微信开发-Jssdk调用分享实例

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO ...

  9. java项目打jar包

    首先 在工程中,右键项目,有个export,选择JAR File,就能导出jar包. 一.java项目没有导入第三方jar包 1. 首先在Eclipse中打开项目, 右键点击项目,选择“Export” ...

  10. NOPI导出Excel 自定义列名

    NOPI 做Excel 导出确实很方便 ,但是一直在用没好好研究. 在网上没找到自定义Columns的方法 ,于是乎自己就在原来的方法上简单地改改. 想用的童鞋们可以直接拿去用! /// 数据大于65 ...