Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to solve the problem of border-radius border display in css, which is very detailed and has certain reference value. Friends who are interested must finish reading it!

1. Conditions for incomplete display of fillet border

As you all know, border-radius:50% can make square elements appear as regular circles. For a deeper understanding of its expression mechanism, please see my previous article: "how much does CSS3 border-radius know?" .

If the element has a border border set, it appears as a positive circle, like this:

Sometimes, however, the circle of the border border is clipped at the edge, which is not a perfect circle, like this:

The left side of the circle is not round, but it seems to be cut down by something and become straight.

If it is under the retina screen, the effect of "one size fits all" may be even more obvious, and clipping may occur up and down.

If this rendering problem occurs, the following two conditions need to be met:

The transparency of the element opacity is not 1

The position of the element does not start and end perfectly at the pixel of the screen.

The first condition is easy to understand; what does the second condition mean?

For an ordinary display, the device pixel ratio devicePixelRatio is 1, that is, the minimum display unit (rendering unit) is 1 pixel. If the starting point of an element starts at 0.5 pixel, the starting position of the element is not just on the pixel of the screen, but in the middle.

This is actually a paradox. Since the minimum rendering unit is 1 pixel, how can we start with 0.5 pixel? Indeed, in the past, almost all decimal values set by the CSS property ended up in integer pixels (such as margin: .5px = margin: 1px), which was more rigid in the old IE era (four 25% width floating elements may fall last). But after entering the CSS3 era, the situation began to change, focusing on the roll call is the transform transformation. Because the transform transform is based on matrix calculation, nine times out of ten, its point coordinates must be decimal of N digits, whether it is rotation or stretch. If our browser starts rendering at a minimum of 1 pixel, the edge of the image will be full of aliasing, and the rendering effect will be very bad (the initial transform transformation is really that bad). As soon as the browser manufacturer looked at it, I went, and the effect was so frustrating that I couldn't even watch it myself, so I made great efforts to improve the rendering experience. We have developed a set of algorithms to soften the edges of non-integer pixels, that is, although they still occupy a grid of 1 pixel, the edge pixels are treated through special processing such as translucency, and we visually look as if the element starts at the position of 0.5 pixel.

It is for this reason that when we use translate displacement in a non-integer position on an element, the edge of the element feels a little blurred.

For a 5K display screen like iMac, the minimum pixel can actually be as small as 0.2pixel, that is, when the translate moves 0.2pixel, the edge of the element will not be softened and blurred, but it may not be moved by 0.5pixel.

Therefore, the following HTML and CSS code can make the fillet border irregular:

.ele {display: inline-block; width: 40px; height: 40px; border: 1px solid # fff; border-radius: 50% transform: translate (.5px, 0); opacity: 0.6;}

According to my tests, in addition to the problem of irregular fillet borders in the Chrome browser, there is also a problem with the rendering of the IE browser, which shows a significant weakening of the right edge:

However, if opacity is set to 1, both IE and Chrome browsers will become a perfect circle again, as follows (truncated from IE):

Firefox's performance was in line with expectations.

Second, what if the partial display problem of border-radius border is solved?

Knowing the conditions under which the problem is triggered, the problem is actually half solved.

2 methods:

1. The size and position of the element are all integer pixels

However, many times this method is impractical, especially for complex layouts, such as when we use calc to calculate the width of elements, or when line-height uses decimals that are not easy to calculate, or when rem-based layouts, etc., it is not easy to force the size and position of elements to be integers.

two。 Translucency without opacity

Since our problem is that opacity is not 1, we don't use opacity to achieve translucency and use other methods instead.

If we want to make a border translucent, we can use RGBA or HSLA colors in addition to opacity.

For example, the CSS code for an example above is replaced by:

.ele {display: inline-block; width: 40px; height: 40px; border: 1px solid hsla (0pc0px, 100px.6); border-radius: 50% transforms: translate (.5px, 0);}

Then the problem of the unrounded border disappears. There is a special demo page where you can click here: the translucent fillet border clipping problem indicates demo.

The comparison results are as follows:

Nice!

The above is all the content of the article "how to solve the border-radius border partial display problem in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.