你可以在Retina显示屏上使用0.5px的边框吗？
Dre*_*eur 9 iphone safari subpixel
在iPhone 4或iPhone4S上的Mobile Safari上,你可以拥有0.5px宽的div边框吗？
半像素边框
border: 0.5px solid black;
缺点:
- 仅适用于Firefox和Webkit Nightly.
边框,图像
border-width: 1px;
border-image: url(border.gif) 2 repeat;
border.gif是一个6×6像素的图像:
优点:
- 有用!
缺点:
- 外部图像.它只有51个字节,可以使用数据URI内联.你需要启动Photoshop(或任何你使用的)来改变边框颜色,这不是很方便.
多个背景图像
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
" 如何使用CSS在视网膜屏幕上定位物理像素 "描述了如何绘制线条.绘制4条线,我们有一个边框.
优点:
- 没有外部图像.
缺点:
- 繁琐的语法,虽然它可以用CSS预处理器抽象出来.
向上和向下缩放
Priit Pirita已经提到过这里了.
使用 border-width: 0.5px
Safari 8(iOS和OS X)带来了border-width: 0.5px.你可以使用它,如果你已经准备好接受当前版本的Android和旧版本的iOS和OS X将只显示一个常规边界(在我看来是一个公平的妥协).
但是,您无法直接使用此功能,因为不了解0.5px边框的浏览器会将其解释为0px.无边界.所以你需要做的是<html>在支持元素时为你的元素添加一个类:
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() { })
然后,使用视网膜细线变得非常容易:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
最重要的是,你可以使用border-radius.您可以轻松地将它与4个边框(顶部/右侧/底部/左侧)一起使用.
资料来源:http://dieulot.net/css-retina-hairline
小智 6
是.使用规模.下面的风格会给你发际线
.transform-border-hairline {
border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);
}
当你需要所有方面时,最好的方法是使用以下方式重新传递DIV:在CSS伪类之前或之后,将边框应用于该伪类,使其大小增加两倍,然后使用transform缩小它:缩小到一半.
pre:before {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px #999 solid;
content: "";
transform: scale(0.5);
-webkit-transform: scale(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
更具体地说(以及所有使用的技巧)http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/