What is ? What is the use?

What is? What is the use? This article will introduce to you what is in CSS and what its functions are, so that everyone can understand the use of . It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Basic introduction of

1. is What?

is a CSS data type that represents basic graphics, acting on the clip-path and shape-outside properties. [Related video tutorial recommendation: css3 tutorial]

The data type can be specified by the basic shape function, that is, the basic shape function can be used to define the basic shape, please see below The "Basic Shape Functions" section lists possible shape function values ​​and their brief descriptions.

The basic shape is then passed as a value to properties (such as the shape-outside property or the clip-path property), which are used to apply shapes to elements to change the flow of content around them, or to clip the element to define shapes separately.

2. Shape reference box

In addition to the height and width of the element, the element's box model box: margin box (margin -box), content-box (content-box), padding-box (padding-box), and border (border-box), can also be used as a reference to specify the shape range on an element. The reference frame can be any of the four frames.

When is used to define a shape, the reference box is defined by each property using a value (basic shape function) (see the Examples section below). The origin of the coordinate system of the basic shape is located at the upper left corner of the reference frame, the x-axis moves to the right, and the y-axis extends downward. All lengths expressed as percentages are resolved from the used dimensions of the reference box (lengths defined by percentages will be redefined by the associated box model with the used dimensions). If no reference box is specified, the border is used as the reference box for the clip-path property, and the border is used for the shape used in the shape-outside property.

2. Basic shape functions

The following are the graphics currently supported by . All values ​​are defined by function expressions and follow value definition syntax.

1. inset()

Syntax:

inset( <shape-arg>{1,4} [round <border-radius>] )

Description:

The inset() function defines an insertion rectangle.

It requires 1~4 offset values, which point to the offset of the edges of the internal reference box (top, right, bottom and left borders and vertices). These specify the position of the insertion rectangle within the element.

The optional parameter is used to define the angle of the arc inserted into the vertex of the rectangle.

2. circle()

circle( [<shape-radius>]? [at <position>]? )

circle() function defines an insertion circle

parameter representation r, which is the radius of the circle, does not accept negative numbers as the value of this parameter.

parameter defines the position of the center of the circle. The default value is the center of the box model.

3. ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

ellipse() function defines an ellipse;

There can be two parameters The values ​​are rx and ry respectively, where rx represents the radius in the x-axis direction, and ry represents the radius in the y-axis direction; this parameter does not accept negative values.

The parameter defines the position of the center of the ellipse. Its default value is the center of the box model.

4. polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<shape-arg> = <length> | <percentage>

polygon() function defines a polygon

represents the filling rule (filling rule ), that is, how to fill the polygon. Optional values ​​are nonzero and evenodd. The default value for this parameter is nonzero.

3. Basic shape description

Calculated value of basic shape

The values ​​in the basic shape function are calculated as specified, with exceptions, such as:

1, omitted values ​​are included and their default values ​​are calculated.

2. A value circle() or ellipse() is calculated as a pair of offsets (horizontal and then vertical) from the upper-left corner origin, each offset is given as a combination of absolute length and percentage .

3. A inset() calculates the extended list of all eight or percentage values.

Reference boxes for shapes are defined as part of properties that have those shapes as values.

Interpolation of basic shapes (animation between shapes)

For interpolation between one basic shape and a second basic shape, the following rules apply. Values ​​in the shape function are inserted as simple lists. List values ​​are interpolated as length, percentage or calculation where possible. If the list values ​​are not one of these types but are the same (e.g. nonzero finds the same list position in both lists), then the values ​​are interpolated.

1. Both shapes must use the same reference frame.

2. If both shapes are of the same type, that type is ellipse() or circle(), and neither radius uses the closest-side or farthest-side keyword, then in the shape function Interpolate between each value.

3. If both shapes are of type inset(), interpolation is performed between each value in the shape function.

4. If both shapes are of type polygon(), then the two polygons have the same number of vertices and are interpolated between each value in the shape function using the same .

5. In all other cases, interpolation is not specified.

4. Browser compatibility

The above is the detailed content of What is ? What is the use?. For more information, please follow other related articles on the PHP Chinese website!