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

This article mainly shows you "what is the basic shape function of css first". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what is the basic shape function of css first".

First of all, we need to know that there are four basic shape functions supported in css:

1. Inset ()-rectangle

2. Circle ()-- circle

3. Ellipse ()-Ellipse

4. Polygon ()-- Polygon

Let's take a closer look at these four basic shape functions and see how they are used.

Inset ()

Syntax:

Inset ({1pm 4} [round]?)

The inset () function defines an insertion rectangle. It requires one to four offset values that point to the offset of the edge of the internal reference frame (top, right, bottom and left boundaries and vertices). These specify the location of the insertion rectangle within the element.

They follow marginal shorthand (shorthand) syntax, so giving one, two, or four values can set four offsets. If you specify an offset value (for example, 15px), it is used as the top, right, bottom, and left offset. If you specify two offset values (for example, 20px10px), they specify the top and bottom offsets and the right and right offsets, respectively. If you specify three values (for example, 10px15px20px), the first specifies the top offset, the second specifies the right and left offsets, and the third specifies the bottom offset. If four values are specified, the first is used as the top offset, the second as the right offset, the third as the bottom offset, and the fourth as the left offset.

Just like margins, the offset value can be set to absolute length or percentage.

The optional parameter, which defines the angle of the arc inserted into the vertex of the rectangle, uses the same syntax as the cssborder-radius property to specify 1-8 values that specify rounding values for the four corners in the horizontal and vertical dimensions. The specified border radius must begin with the round keyword. It also follows the marginal shorthand syntax, giving one, two, or four values can set four offsets.

Here are all valid inset () rectangular shape declarations:

A rectangle with 5px rounded corners, whose edges are set 10% inward from the top and bottom edges, and 20% box reference frames on the left and right

Inset (10%20%round5px)

Create a non-circular embedded rectangle and set the reference frame inward from the top 15px, the left and right 20px, and the lower edge 30px

Inset (15px20px30px)

In all four, create a rectangle with 25% inward orientation relative to the edge of the reference box, and the upper left corner and lower right corner are round 10px, and the upper right corner and lower left corner are rounded 30px

Inset (25%round10px30px)

A rectangle with 10px fillet, inward setting the reference frame from the top 10px, the left 40px, the right 20px, and the lower edge 30px

Inset (10px20px30px40pxround10px)

Circle ()

Syntax:

Circle () = circle ([]? [at]?)

/ * among them. * /

= | | closest-side | farthest-side |

The circle () function is used to define circles. The question mark indicates that both parameters are optional and can be omitted. If one is omitted, the browser sets the parameter to its default value.

If you omit the position parameter, the center of the circle is at the center of the element it uses. You can specify the location using the same syntax as the background-position attribute syntax. The position parameter is preceded by the word at.

The shape-radius parameter specifies the radius of the circle. It can be set to absolute length or percentage. The percentage values here are resolved from the width and height of the reference frame. Negative values are not allowed.

In addition to specifying the radius of the circle using length and percentage, you can set it using one of the following two keywords: closest-side or furthest-side. Closest-side is the default, which means that if this parameter is omitted and the radius of the circle is not specified, the browser uses the length from the center of the element to the nearest edge in any dimension as the length of the radius. Farthest-side uses the length from the center to the outermost side.

The above is all the content of the article "what is the basic shape function of css first". 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.