9

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

4

10 回答 10

9

采用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

于 2014-09-18T10:30:48.853 回答
8

我写了不同技术的概述：

半像素边框

border: 0.5px solid black;

缺点：

  • 仅适用于 Firefox 和 Webkit Nightly。

边框图像

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

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

边框图像解释

优点：

  • 有用！

缺点：

  • 外部图像。它只有 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;

“<a href="https://excellenteasy.com/devblog/posts/how-to-target-physical-pixels-on-retina-screens-with-css/" rel="nofollow noreferrer">如何定位物理带有 CSS 的视网膜屏幕上的像素”描述了如何画一条线。画4条线，我们有一个边框。

优点：

  • 没有外部图像。

缺点：

  • 繁琐的语法，虽然它可以用 CSS 预处理器抽象出来。

放大和缩小

Priit Pirita 已经在这里提到过。

于 2014-01-08T07:58:48.573 回答
6

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

 .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/

于 2013-09-25T06:32:27.693 回答
2

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

@media (-webkit-min-device-pixel-ratio: 2){
    div {
        border-width:0.5px;
    }
}
于 2014-06-11T18:36:32.647 回答
2

我也发现这种方法有效（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>");
于 2014-07-11T22:21:38.783 回答
2

我为此使用 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;
    }
}
于 2020-02-04T10:00:41.197 回答
1

使用 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);
于 2012-11-20T21:37:14.567 回答
1 
box-shadow: 1px 1px 0px 2px rgba(0, 0, 0, 0.5);
于 2022-02-13T19:25:23.227 回答
0

分享一个我写的并且一直在使用的 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');
}
于 2014-07-28T02:48:17.350 回答
-1

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

void CGContextSetLineWidth (
   CGContextRef c,
   CGFloat width
);

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

在这里阅读

于 2011-12-27T02:03:55.863 回答