Retina屏下的1px边框的实现

Retina 下的真 1px 的东东现在常见的实现无非就是

  1. 图片
  2. 阴影
  3. 缩放

每种都有各自的用处。

前段时间写了个“软图片”的实现

.border {
  background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
  linear-gradient(270deg, red, red 50%, transparent 50%),
  linear-gradient(0deg, red, red 50%, transparent 50%),
  linear-gradient(90deg, red, red 50%, transparent 50%);
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
  padding: 10px;
}

缺点就是使用背景,使用时可能要配合padding,性能其实测试过,没啥影响。

同样的方式也可以搞定分割线,细细滴会好看好多滴。

.border {
  background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

扩展阅读:Yes We Can Do Fraction Of A Pixel

This entry was posted in Web开发 and tagged . Bookmark the permalink.

你可能对这些也感兴趣

6 Responses to Retina屏下的1px边框的实现

  1. 王涛 @ 2014-03-21 at 09:00

    终于更了。。

  2. Jerry Qu @ 2014-03-30 at 19:04

    居然更新鸟~

  3. A4 @ 2014-03-31 at 11:04

    真的更新了~

  4. Bug @ 2014-03-31 at 11:09

    呀!确实更新了~

  5. 潇洒 @ 2014-04-04 at 09:05

    真的是你吗

  6. 崔凯 @ 2014-05-07 at 15:33

    被盗号了吧

发表评论

(必填)

(必填)