Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil) . Junte-se a nós e ajude a fazer o trabalho!
Summary
The <basic-shape>
type can be specified using basic shape functions. When using this syntax to define shapes, the reference box is defined by each property that uses <basic-shape>
values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.
Possible shapes
The following shapes are supported. All <basic-shape>
values use functional notation and are defined here using the value definition syntax.
inset()
-
inset( <shape-arg>{1,4} [round <border-radius>]? )
Defines an inset rectangle.
When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
The optional
<border-radius>
argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area.
polygon()
-
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<fill-rule>
represents the filling rule used to determine the interior of the polygon. Possible values arenonzero
andevenodd
. Default value when omitted isnonzero
.Each pair argument in the list represents xi and yi - the x and y axis coordinates of the ith vertex of the polygon.
circle(
)-
circle( [<shape-radius>]? [at <position>]? )
The
<shape-radius>
argument represents r, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box assqrt(width^2+height^2)/sqrt(2)
.The
<position>
argument defines the center of the circle. This defaults to center if omitted. ellipse()
-
ellipse( [<shape-radius>{2}]? [at <position>]? )
The
<shape-radius>
arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.The position argument defines the center of the ellipse. This defaults to center if omitted.
The arguments not defined above are defined as follows:
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side
.
closest-side
uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.
farthest-side
uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.
Computed Values of Basic Shapes
The values in a <basic-shape>
function are computed as specified, with these exceptions:
- Omitted values are included and compute to their defaults.
- A
<position>
value incircle()
orellipse()
is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage. - A
<border-radius>
value ininset()
is computed as an expanded list of all eight<length>
or percentage values.
Interpolation of Basic Shapes
- Both shapes must use the same reference box.
- If both shapes are the same type, that type is
ellipse()
orcircle()
, and none of the radii use theclosest-side
orfarthest-side
keywords, interpolate between each value in the shape functions. - If both shapes are of type
inset()
, interpolate between each value in the shape functions. - If both shapes are of type
polygon()
, both polygons have the same number of vertices, and use the same<fill-rule>
, interpolate between each value in the shape functions. - In all other cases no interpolation is specified.
Examples
TODO
Specifications
Specification | Status | Comment |
---|---|---|
CSS Shapes Module Level 1 The definition of '<basic-shape>' in that specification. |
Candidate Recommendation | Initial definition. |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 47 (47) | No support | No support | (Yes) |
inset() |
? | No support | No support | No support | ? |
Animations | ? | 49 (49) | No support | No support | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 47.0 (47) (behind a pref) | No support | No support | (Yes) |
inset() |
? | (Yes) | No support | No support | No support | ? |
Animations | ? | ? | 49.0 (49) | No support | No support | ? |