你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
liermao

css技巧之:实现比1px还要细的边框 主要在移动端应用 0个回复 专栏 @ CSS

liermao 发布于 3 月前

有时候ui设计师出的设计稿,尤其是移动端,会发现设计出来的边框比较细。跟头发丝一样。
而在我们认知的范围之内border最小宽度是1px,在移动端看起来比较粗,其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。
查了一下:devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。
那我们只有换思路咯,目前我只尝试的下面的三种方法。。如还有其他,欢迎补充。

第一种:利用box-shadow实现窄边框。(见下图)

浏览器放大到300%,见下图:

代码: box-shadow:0 0 1px 0 red;

原理:利用盒子阴影绘制。
优点:代码少,适用于各种场景。
缺点:颜色会变暗,box-shadow不占位置,语义化不符合标准。不是实际意义的边框。

第二种:多背景渐变实现

浏览器放大到300%,见下图:

代码: background:
linear-gradient(180deg, red, red 50%, transparent 50%) top left / 100% 1px no-repeat, linear-gradient(90deg, red, red 50%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0deg, red, red 50%, transparent 50%) bottom right / 100% 1px no-repeat, linear-gradient(-270deg, red, red 50%, transparent 50%) bottom left / 1px 100% no-repeat;

原理:通过不同的四中角度的渐变,实现边框。
优点:可实现单条多条的边框,颜色自定义。
缺点:代码量比价多,兼容性不行,不能实现圆角。
bug:当浏览器缩小比例小于百分之百的时候,边框会消失。

第三种:伪类 + transform 实现

浏览器放大到300%,见下图:

代码::after{
content: ''; position: absolute; top: 0; left: 0; border: 1px solid red; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }

原理:利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半, 然后进行绝对定位。
优点:所有条件满足。支持圆角。
缺点:暂时还没有发现。

如果大家还有什么更好的方法,欢迎提出来。

等待第一条回复
登录后回复,如无账号,请使用邀请码注册