css - Half pixel border radius in retina

Question

When using a retina display, is it possible to use half-pixel border radius like this:

#box {
    height: 3px;
    width: 100px;
    border-radius: 1.5px;
}

I did it on my retina iPhone 4, and it shows up as a 1px border radius. Any reasons and/or fixes?

Answer 1

边界测量必须是整数像素（所以1.5不会飞）。但是您可以使用传播半径来伪造它..

野外有很多例子，包括这个：

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {

  button {
    border:none;
    padding:0 16px;
    box-shadow: inset 0 0 1px #000,
                inset 0 1px 0 #75c2f8,
                0 1px 1px -1px rgba(0, 0, 0, .5);   }

}