Skip to content

Latest commit

 

History

History
105 lines (82 loc) · 3.62 KB

css-half-border.md

File metadata and controls

105 lines (82 loc) · 3.62 KB
Raw

如何制作 0.5 像素的细线

移动技术的出现，将屏幕显示技术带入 Retina 级别，现在绝大部分移动端设备都达到或者超过了 Retina 级别，但是由于移动端的屏幕分辨率和浏览器的分辨率有一些换算关系，导致在浏览器中的 1 个像素会占用屏幕的 2 个或者 2 个以上的像素，这样使得 Mobile Web 的 UI 在精细程度上大打折扣。但是我们还是有技术的手段来解决这个问题。

border-width: 0.5px

直接通过样式来设置0.5px的边框。当然这个方案是非常理想的方案，但是事实总是残酷的，它只在 iOS 8+ 上支持，对于 Android 无法支持。不过个人相信时间会让它成为最佳可行方案。

.border {
	border: 1px #000 solid;
}
@media(min-device-pixel-ratio: 2) {
	border-width: 0.5px;
}

当然对于这种兼容性问题我们可以通过 JavaScript 来做降级处理，我们将默认边框设置为1px，分辨出来是 iOS 并且版本为 8 以上，就可以将边框设置为0.5px；

缺点:

  • 兼容性问题。

利用 box-shadow

我们也可以利用 box-shadow 的阴影来绘制出0.5px的线，只需要将阴影的偏移半径设置的足够小，模糊半径设置为1px。这种比较难控制，颜色很难取，并且它并不是一条真是的线。

.border {
	box-shadow: 0 -1px 1px -1px rgba(0, 0, 0, .5),
					-1px 0 1px -1px rgba(0, 0, 0, .5),
					1px 0 1px -1px rgba(0, 0, 0, .5),
					0 1px 1px -1px rgba(0, 0, 0, .5);
}

缺点：

  • 仔细观察它并不是一条实线；
  • 由于是阴影，要取到想要的颜色很难。

border-image

其实就是利用图片的缩放来解决这个问题，需要一张 6*6px 的图片，做成特殊的透明框线图；但是它不支持圆角。

.border {
	border-width: 1px;
	border-image: url(border.png) 2 repeat;
}

缺点：

  • 需要额外的图片；
  • 不支持圆角边框；
  • 颜色固定，无法随意设置。

viewport

利用动态的改变<viewport>让网页的像素区域和屏幕的像素区域重合，这样就很轻松的去写1px的边框，并且它会等于屏幕本身的1px。

//当 devicePixelRatio = 2 输出：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//当 devicePixelRatio = 3 输出：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

缺点：

  • Mobile APP 在设计上会存在问题（我们会在专门的 viewport 中去讲解）

利用伪类的缩放

利用 ::before 或 ::after 画出是DOM的尺寸 2 倍或 3 倍的绝对定位伪对象，使用 1px 的 border 定义新边框后，让后通过设置 transform 的 scale 把伪类对象缩小到一半或 1/3，这样看上去伪对象就和容器一样大了。

.border {
    border-bottom: 1px solid #ccc;
}
@media (min-device-pixel-ratio: 2) {
    .border {
        position: relative;
        border-bottom: none;
    }
    .border::after {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 200%;
        height: 0;
        border-bottom: 1px solid #ccc;
        transform: scale(0.5) translate(-50%, -50%);
    }
}

缺点：

  • 占用伪类；
  • 容器的定位被设置了；
  • 代码太复杂。

总结

这些方案中各有利弊，需要结合实际项目情况来做，当然我们相信随着时间的推移，各大浏览器厂商会支持border-width: 0.5px这一样式。

参考