CSS Random permutation Boder-radius

When you notice an identifiable feature that repeats itself in a fixed pattern, the natural randomness it attempts to create will collapse immediately.

The use of prime numbers in CSS adds a random sense of realism. This was named by Alex Walker as the "Cicada principle". He first raised the idea of random authenticity of Eng home by prime numbers. This method applies not only to the background, but also to other situations involving regular repetition.

The principle of border-image is basically the nine scaling method: Cut the picture into nine pieces and apply them to the edges and corners of the elements ' borders accordingly.

When the sum of the radii of any two adjacent fillets exceeds the size of the border box, the user agent must proportionally reduce the values used for each border radius until they do not overlap each other.

The Boder-radius can specify the horizontal and vertical radii individually, as long as the two values are separated by a slash (/). This feature allows us to create elliptical fillets around the corner. A container sets unequal horizontal and vertical Border-radius; The arc at the corner now shows the shape of the ellipse, and the horizontal and vertical radii of the ellipse are the values we specify for the Border-radius.

Boder-radius This property can not only accept the length value, but also accept the percent value. This percentage value is parsed based on the dimension of the element, that is, the width is used for the resolution of the horizontal radius, and the height for the resolution of the vertical radius.

We can specify a different value for each corner of the element, and there are two ways to do it. The first method is to use each of the expanded properties it corresponds to: Border-top-left-radius, Border-top-right-radius, Border-bottom-left-radius, Border-bottom-right-radisu.

However, we can provide multiple values separated by spaces at once. If we pass it four values, these four values are applied from the upper-left corner to each corner of the element, respectively, in a clockwise order. If we provide less than four values, they will be repeated in the usual way of CSS, three values, meaning that the fourth value is the same as the second value, and if there are only two values, it is the same as24.

CSS Random permutation Boder-radius