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

This article mainly explains "how to realize the fillet frame in css3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize the fillet frame with css3".

The css3 fillet border property is "border-radius", which is a compound attribute with the syntax "border-radius:1-4 length |%;"; the four values of the attribute control the fillet border style of the upper-left, upper-right, lower-right, and lower-left corner of the element, respectively.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the fillet border property of css3

The fillet border property of css3 is border-radius.

The border-radius attribute is a composite property that can specify up to four border- *-radius attributes.

Each of these values can be in the form of a numerical value or a percentage.

The first lenght of the length/length represents the radius in the horizontal direction, while the second represents the radius in the vertical direction.

If it is a value, then the four values top-left, top-right, bottom-right, and bottom-left are equal.

If there are two values, then top-left and bottom-right are equal, the first value, and the top-right and bottom-left values are equal, the second value.

If there are three values, the first value is to set top-left, while the second value is top-right and bottom-left and they will be equal, and the third value is to set bottom-right.

If there are four values, the first value is to set top-left, and the second value is top-right, the third value is bottom-right, and the fourth value is to set bottom-left.

In addition to the abbreviations above, you can also write four corners, just like border, as follows:

Border-top-left-radius: / / upper left border-top-right-radius: / / upper right border-bottom-right-radius: / / lower right border-bottom-left-radius: / / lower left

Examples are as follows:

123 div {border:2px solid # a1a1a1 * paddingdiv 10px 40px; the background:#dddddd;width:300px;border-radius:25px;} border-radius attribute allows you to add rounded borders to the element!

Output result:

At this point, I believe you have a deeper understanding of "how to achieve the fillet frame in css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.