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

This article mainly shows you "what is the meaning of border-radius in css", the content is simple and clear, hoping to help you solve your doubts, let the editor lead you to study and learn "what is the meaning of border-radius in css" this article.

One: what does borderradius mean

When we make a website, we always encounter the effect of rounded corners. From the user's point of view, using rounded corners can make the website more beautiful. However, in css2, it is a headache to achieve the effect of rounded corners. In fact, the oldest way is to achieve it through the background, but it is also very troublesome to make. Now, in css3, we can use the fillet attribute to achieve rounded corners. As a result, the problems encountered in realizing the fillet effect are reduced.

Many people develop the website, do not like to use pictures, try to maintain the ability to use css pictures do not use pictures, if the site has a lot of pictures, it will lead to the site needs to send fttp requests, and the transmission is also very large, then you can use the border-radius attribute to add rounded corners to the pictures to achieve a beautiful effect.

Second: detailed explanation of borderradius attributes

1.borderradius syntax:

Border-radius: length valu

The length value can be expressed as px or as a percentage, for example:

CSS3border-radius attribute

# div1

{

Width:100px

Height:50px

Border:1pxsolidgray

Border-radius:20px

}

Note: in the above code, the value of border-radius is 20, which means that all four corners are 20.

The way 2.border-radius is written

In css, many properties are written in four ways, similar to margin and padding. When we set the border-radius property to a value, it represents that the radius of the four corners is 10px.

When border-radius is two values, such as border-radius:10px20px, 10px represents the upper left corner and lower right corner, and 20px represents the upper right corner and lower left corner.

When the border-radius attribute has three values, for example, border-radius:10px20px30px;, where 10px represents the upper left corner radius, 20px represents the lower left corner and upper right corner, and 30px represents the lower right corner. If there are four values, they are upper left corner, upper right corner, lower right corner and lower left corner, and the direction is clockwise.

The above is all the content of this article "what is the meaning of border-radius in css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.