当前位置：文江博客话题详情

Retina 显示屏上可以有 0.5 像素的边框吗？

发布于 2024-12-23 00:00:59 字数 71 浏览 1 评论 0原文

在 iPhone 4 或 iPhone4S 上的 Mobile Safari 上，是否可以设置 0.5 像素宽的 div 边框？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮萍、无处依 2024-12-30 00:00:59

使用 `border-width: 0.5px`

Safari 8（iOS 和 OS X 中）引入了 border-width: 0.5px。如果您准备好接受当前版本的 Android 以及旧版本的 iOS 和 OS X 将仅显示常规边框（我认为这是一个公平的妥协），您可以使用它。

但您不能直接使用它，因为不知道 0.5px 边框的浏览器会将其解释为 0px。无边界。因此，您需要做的就是在支持时向您的元素添加一个类：

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

Use `border-width: 0.5px`

Safari 8 (in both iOS and OS X) brings border-width: 0.5px. You can use that if you’re ready to accept that current versions of Android and old versions of iOS and OS X will just show a regular border (a fair compromise in my opinion).

You can’t use this directly though, because browsers that don’t know about 0.5px borders will interpret it as 0px. No border. So what you need to do is add a class to your <html> element when it is supported:

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() {   })

Then, using retina hairlines becomes really easy:

div {
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

Best of all, you can use border-radius with it. And you can use it with the 4 borders (top/right/bottom/left) as easily.

Source: http://dieulot.net/css-retina-hairline

回复收藏 0 原文

划一舟意中人 2024-12-30 00:00:59

我写了一篇不同技术的概述：

半像素边框

border: 0.5px solid black;

缺点：

仅适用于 Firefox 和 Webkit Nightly。

border-image

border-width: 1px;
border-image: url(border.gif) 2 repeat;

border.gif 是一个 6×6 像素图像：

border image说明

优点：

它有效！

缺点：

外部形象。它只有 51 个字节，可以使用 Data 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 已经在这里提到过。

I wrote an overview of different techniques:

Half-pixel border

border: 0.5px solid black;

Cons:

Works only in Firefox and Webkit Nightly.

border-image

border-width: 1px;
border-image: url(border.gif) 2 repeat;

border.gif is a 6×6 pixel image:

border image explained

Pros:

It works!

Cons:

An external image. It’s only 51 bytes and it can be inlined using Data URI. You’d need to fire up Photoshop (or whatever you use) to change the border color, which isn’t very convenient.

Multiple background images

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;

“How to target physical pixels on retina screens with CSS” describes how to draw a line. Draw 4 lines and we have a border.

Pros:

No external images.

Cons:

Cumbersome syntax, although it can be abstracted out with CSS preprocessors.

Scale up and down

Mentioned here already by Priit Pirita.

回复收藏 0 原文

油饼 2024-12-30 00:00:59

是的。使用规模。下面的样式会给你发际线

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

当你需要所有边时，最好的方法是用 :after 或 :before CSS 伪类复制 DIV，将边框应用于该伪类，使其大小两倍，然后使用 Transform:scale 缩放它减少到一半。

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/

Yes. Use scale. The style below will give you hairline

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

When you need all sides, then the best way is to repliacte the DIV with :after or :before CSS pseudoclass, apply border to that pseudoclass, make it twice the size and then scale it with transform:scale down to half.

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;
}

More specificly (and all those tricks in use too) here http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/

回复收藏 0 原文

憧憬巴黎街头的黎明 2024-12-30 00:00:59

我为此使用 CSS 自定义属性。它更加优雅（恕我直言）。

:root {
    --hair:1px;
}

.myDiv {
    border: var(--hair) solid #CCC;
}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx) {
    :root {
        --hair:0.5px;
    }
}

I use CSS custom properties for this. It is much more elegant (IMHO).

:root {
    --hair:1px;
}

.myDiv {
    border: var(--hair) solid #CCC;
}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx) {
    :root {
        --hair:0.5px;
    }
}

回复收藏 0 原文

故事与诗 2024-12-30 00:00:59

我还发现这个方法有效（iOS7）：

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ff0000' x='0' y='0' width='1' height='0.5'/></svg>");

Also I've found this method working (iOS7):

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ff0000' x='0' y='0' width='1' height='0.5'/></svg>");

回复收藏 0 原文

皓月长歌 2024-12-30 00:00:59

Apple 在 OSX Yosemite 和 iOS 8 中添加了对此的支持。

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

Apple added support for this in OSX Yosemite and iOS 8.

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

回复收藏 0 原文

贪了杯 2024-12-30 00:00:59

通过 CSS，可以使用 box-shadow 和 spread radius 来完成。该方法的解释如下：
http://bradbirdsall.com/mobile-web-in-high-resolution

这是从上面的链接复制的：

box-shadow: inset 0 0 1px #000,
            inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, .5);

With CSS that can be done using box-shadow and spread radius. The approach is explained here:
http://bradbirdsall.com/mobile-web-in-high-resolution

This is copied from the link above:

box-shadow: inset 0 0 1px #000,
            inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, .5);

回复收藏 0 原文

折戟 2024-12-30 00:00:59

box-shadow: 1px 1px 0px 2px rgba(0, 0, 0, 0.5);

box-shadow: 1px 1px 0px 2px rgba(0, 0, 0, 0.5);

回复收藏 0 原文

伴随着你 2024-12-30 00:00:59

分享我编写并一直在使用的 Sass/SCSS + Compass mixin：

@mixin hairline($color, $side: 'top') {
  &:before {
    content: ' ';
    display: block;
    @if $side == 'top' {
      width: 100%;
      height: 1px;
    }
    @else if $side == 'bottom' {
      width: 100%;
      height: 1px;
    }
    @else {
      width: 1px;
      height: 100%;
    }
    position: absolute;
    #{$side}: 0;
    background-color: $color;
    @media (-webkit-min-device-pixel-ratio: 2) {
      @if $side == 'top' {
        @include transform(scaleY(0.5));
      } @else if $side == 'bottom' {
        @include transform(scaleY(0.5));
      } @else {
        @include transform(scaleX(0.5));
      }
    }
  }
}

CSS 示例：

.my-element-where-i-need-a-retina-bottom-border {
  @include hairline(red, 'bottom');
}

Sharing a Sass/SCSS + Compass mixin I wrote and I've been using:

@mixin hairline($color, $side: 'top') {
  &:before {
    content: ' ';
    display: block;
    @if $side == 'top' {
      width: 100%;
      height: 1px;
    }
    @else if $side == 'bottom' {
      width: 100%;
      height: 1px;
    }
    @else {
      width: 1px;
      height: 100%;
    }
    position: absolute;
    #{$side}: 0;
    background-color: $color;
    @media (-webkit-min-device-pixel-ratio: 2) {
      @if $side == 'top' {
        @include transform(scaleY(0.5));
      } @else if $side == 'bottom' {
        @include transform(scaleY(0.5));
      } @else {
        @include transform(scaleX(0.5));
      }
    }
  }
}

CSS example:

.my-element-where-i-need-a-retina-bottom-border {
  @include hairline(red, 'bottom');
}

回复收藏 0 原文

伪装你 2024-12-30 00:00:59

我不确定你的意思到底是什么。如果您询问是否可以在 iPhone 4 上绘制 1 像素的边框（该边框是 iphone3G 上边框物理尺寸的 1/2），那么可以。 CoreGraphics 使用点而不是像素。通过下面的方法可以看到，你可以指定一个float：

void CGContextSetLineWidth (
   CGContextRef c,
   CGFloat width
);

由于1point != 1px，所以在iPhone4上你可以通过指定0.5point来指定1px。

在这里阅读它

I'm not sure what you mean exactly. If you are asking if you can draw a border of 1 px on an iPhone 4 which would be 1/2 the physical size of the border on an iphone3G, then yes. CoreGraphics uses points instead of pixels. As you can see by the following method, you can specify a float:

void CGContextSetLineWidth (
   CGContextRef c,
   CGFloat width
);

Since 1point != 1px, you can specify 1px on an iPhone4 by specifying 0.5point.

Read up on it here

回复收藏 0 原文

~没有更多了~

关于作者

小鸟爱天空丶

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

Retina 显示屏上可以有 0.5 像素的边框吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

使用 `border-width: 0.5px`

Use `border-width: 0.5px`

半像素边框

border-image

多个背景图像

放大和缩小

Half-pixel border

border-image

Multiple background images

Scale up and down

关于作者

相关话题

热门标签

推荐作者

琉璃梦幻

qq_4zWU6L

话少情深

西西弗的石头怪

彻夜缠绵

千寻…

友情链接

Retina 显示屏上可以有 0.5 像素的边框吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

使用 border-width: 0.5px

Use border-width: 0.5px

半像素边框

border-image

多个背景图像

放大和缩小

Half-pixel border

border-image

Multiple background images

Scale up and down

关于作者

相关话题

热门标签

推荐作者

琉璃梦幻

qq_4zWU6L

话少情深

西西弗的石头怪

彻夜缠绵

千寻…

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

使用 `border-width: 0.5px`

Use `border-width: 0.5px`