Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In CSS, you must be familiar with the property of border-radius. With this property, you can set the outer border of the element to be rounded, so as to achieve a variety of ellipses you want. One radius determines a circle, and two radii determine an ellipse, and we usually need to achieve various rounded effect. It is the rounded corner effect formed by the intersection of elliptic circle and frame.

border-radius

  • Let’s start with a picture

  • As shown in the figure, this rectangle has four different rounded corners, each of which is made up of different dimensions. So each of the rounded corners is made up of different horizontal and vertical radii.

  • Then let’s look at the code that generates this circle.

  • Border-radius: can be understood as two sets of attributes. The first group is the horizontal dimension and the second group is the vertical dimension, separated by an underscore (/). And the directions correspond to this top left, right, top right, bottom left, bottom left.

  • But in our normal development, its properties are shorthand.

border-radius: 1em; /* Equivalent to: */ border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em;Copy the code
border-radius: 1em/5em; /* Equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em;Copy the code

Well, that’s all for today. You are still the best today. Bye Bye!!