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

This article mainly introduces what is in html, the article is very detailed, has a certain reference value, interested friends must read it!

First, the basic introduction

1. What is it?

Is a CSS data type that represents the underlying graphics and acts in the clip-path and shape-outside properties. [recommended for related video tutorials: css3 tutorial]

The data type can be specified by the basic shape function, that is, you can use the basic shape function to define the basic shape. See the "basic shape function" section below to list the possible shape function values and their simple descriptions.

The basic shape is then passed as a value to attributes, such as the shape-outside attribute or the clip-path attribute, which are used to apply the shape to the element to change the content flow around it, or to cut the element to define the shape separately.

2. The reference frame of the shape

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

When used to define a shape, the reference box is defined by each property that uses the value (basic shape function) (see the example section below). The origin of the coordinate system of the basic shape is located in 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 parsed from the used dimensions of the reference box (the length defined by the percentage will be redefined by the related box model and the dimensions used). If no reference box is specified, the border is used as a reference box for the clip-path property, and the border is used for the shape shape-outside used in the property.

2. Basic shape function

The following are currently supported drawings. All values are defined by function expressions and follow the attribute value definition syntax (valuedefinitionsyntax).

1. Inset ()

Syntax:

Inset ({1pm 4} [round])

Description:

The inset () function defines an insertion rectangle.

It requires 1 to 4 offset values that point to the edge of the internal reference frame (upper, right, lower and left boundaries and vertices). These specify the location of the insertion rectangle within the element.

Optional parameters define the angle of the arc inserted into the vertex of the rectangle.

2. Circle ()

Circle ([]? [at]?)

The circle () function defines an insert circle.

The parameter represents r, the radius of the circle, and does not accept a negative number as the value of the parameter.

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

3. Ellipse ()

Ellipse ([{2}]? [at]?)

The ellipse () function defines an ellipse

Parameters can have two values, rx and ry, where rx represents the radius of the x-axis direction and ry represents the radius of the y-axis direction; this parameter does not accept negative values.

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

4. Polygon ()

Polygon ([,]? [] #)

= |

The polygon () function defines a polygon

Represents the filling rule (fillingrule), 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. Include the omitted value and calculate its default value.

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

3. A median inset () is calculated as an extended list or percentage value of all eight.

The reference box for shapes is defined as part of the properties of these shapes as values.

Interpolation of basic shapes (animation between shapes)

For interpolation between one basic shape and the second basic shape, the following rules are applied. The values in the shape function are inserted as simple lists. List values are inserted as lengths, percentages, or calculations where possible. If the list values are not one of these types but are the same (for example, nonzero finds the same list position in both lists), the values are interpolated.

1. Both shapes must use the same reference frame.

2. If both shapes are of the same type, which type is ellipse () or circle (), and none of the radii uses the closest-side or farthest-side keyword, interpolation is performed between each value in the shape function.

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 (), the two polygons have the same number of vertices and are interpolated between each value in the same shape function.

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

The above is all the content of this article "what is in html". Thank you for reading! Hope to share the content to help you, more related 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.