你可以在Retina显示屏上使用0.5px的边框吗？ [英] Can you have a 0.5px border on a Retina Display?

问题描述

在iPhone 4或iPhone4S上的Mobile Safari上，你有一个0.5px宽的div边框吗？

解决方案

<我写了 描述了如何绘制线条。画4条线，我们有一个边框。

优点：

• 无外部图片。

缺点：

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

向上和向下缩放

Priit Pirita已经在这里提到过。

On Mobile Safari on an iPhone 4 or iPhone4S, can you have a border of a div that is 0.5px wide?

解决方案

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:

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.

这篇关于你可以在Retina显示屏上使用0.5px的边框吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！