سؤال

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?

هل كانت مفيدة؟

المحلول

border measurements must be integer pixels (so 1.5 won't fly). But you can fake it by using the spread radius..

There are many examples in the wild, including this one:

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

}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top