2014-12-31更新：
截至到IOS8.1，safari仍不支持@supports
待safari支持@supports, 就可以利用0.5px了！

2014-7-25更新：
1. 修正dpr = 1.5 机器下四角边框的缩放比例；
2. 修正右边框（rBor）的transform-origin为100%, 100%;
3. 添加对 dpr = 3 机器的支持；通过以下机器验证：小米1（dpr = 1.5）、SAMSUNG S3（dpr = 2）、NEXUS 5（dpr =3）测试地址：

移动web开发，总避免不了1设备像素边框的问题。本文参考了half-point css border in ios 一文。

理想的

div{border:1px solid black;
}@media (-webkit-min-device-pixel-ratio: 2){div{border-width:0.5px;}
}

仅有 Firefox和Safari 8 (introduced in OS X Yosemite)支持。twitter有位哥们听到这个消息时，已经不知所云。

现实的

原理简单介绍：content属性与:before 及:after 伪元素配合使用，来插入生成内容，即所需边框。使用transform scale方法将生成内容的边框（或高度或宽度），缩小至合适大小（如0.5倍）。另外，处理好transform-origin值至关重要，下图可以帮助你更好地理解origin值。查看代码或查看此gist，并奉上demo：继续阅读 →

转载于:https://www.cnblogs.com/sugar-tomato/p/5192279.html

[转]retina屏下支持0.5px边框的情况相关推荐

css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景实现外部圆角边框,内部圆角渐变色背景,是用父div ...
div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解 ...
0.5px边框，css及sass
手机上的边框,1px的宽度已经无法满足需求了,0.5px的需求应用而生. 做法: 利用伪类,做一个长宽200%,1px宽度的边框,再缩小至0.5倍. div {position: relative; ...
关于canvas在retina屏下绘制文字或图像模糊的解决方案
一.问题描述最近在鼓捣canvas的时候,发现绘制在canvas上的文字(或图片)在retina屏幕上会出现显示模糊的问题,感觉很不爽,于是就Google了一番,还真发现了一个解决方案.有兴趣的同学 ...
CSS 实现 0.5px 边框线
原有元素要添加 position: relative; ::before伪元素一点要加z-index属性保证原有元素处于后加元素上层,否则会导致原有元素上点击等事件触发不了 <div class ...
如何实现0.5px边框
1.border+border-image+linear-gradient的方式 <div class="border"></div>.border{wid ...
[前端CSS高频面试题]如何画0.5px的边框线（详解）
往期css3文章详解 CSS3中最好用的布局方式--flex弹性布局(看完就会) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...

[转]retina屏下支持0.5px边框的情况

理想的

现实的

[转]retina屏下支持0.5px边框的情况相关推荐

最新文章

热门文章