-webkit-line-clamp =
none |
<integer [1,∞]>
-webkit-line-clamp =
none |
<integer [1,∞]>
-webkit-text-stroke-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
ascent-override =
normal |
<percentage [0,∞]>
descent-override =
normal |
<percentage [0,∞]>
font-weight =
auto |
<font-weight-absolute>{1,2}
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
font-weight =
auto |
<font-weight-absolute>{1,2}
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
line-gap-override =
normal |
<percentage [0,∞]>
size-adjust =
<percentage [0,∞]>
size-adjust =
<percentage [0,∞]>
@page =
@page <page-selector-list>? { <declaration-rule-list> }
<page-selector-list> =
<page-selector>#
<page-selector> =
[ <ident-token>? <pseudo-page>* ]!
<pseudo-page> =
':' [ left | right | first | blank ]
Where the <page-body> includes:
and <pseudo-page> represents these pseudo-classes:
@page =
@page <page-selector-list>? { <declaration-rule-list> }
<page-selector-list> =
<page-selector>#
<page-selector> =
[ <ident-token>? <pseudo-page>* ]!
<pseudo-page> =
':' [ left | right | first | blank ]
Where the <page-body> includes:
and <pseudo-page> represents these pseudo-classes:
animation-duration =
<time [0s,∞]>#
animation-duration =
<time [0s,∞]>#
animation-iteration-count =
<single-animation-iteration-count>#
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
animation-iteration-count =
<single-animation-iteration-count>#
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
animation =
<single-animation>#
<single-animation> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> , <step-position>? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
animation =
<single-animation>#
<single-animation> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> , <step-position>? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
aspect-ratio =
auto ||
<ratio>
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
border-block-end-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-block-start-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-block-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-block-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-bottom-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-image-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
border-image-slice =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
border-image-width =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
border-image-width =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>
<border-image-source> =
none |
<image>
<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>
<border-image-source> =
none |
<image>
<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
border-inline-end-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-inline-start-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-inline-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-inline-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-left-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-right-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-top-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-width =
<line-width>{1,4}
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
box-shadow =
<spread-shadow>#
<spread-shadow> =
<'box-shadow-color'>? &&
[ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] &&
<'box-shadow-position'>?
<box-shadow-color> =
<color>#
<box-shadow-offset> =
[ none | <length>{2} ]#
<box-shadow-blur> =
<length [0,∞]>#
<box-shadow-spread> =
<length>#
<box-shadow-position> =
[ outset | inset ]#
box-shadow =
<spread-shadow>#
<spread-shadow> =
<'box-shadow-color'>? &&
[ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] &&
<'box-shadow-position'>?
<box-shadow-color> =
<color>#
<box-shadow-offset> =
[ none | <length>{2} ]#
<box-shadow-blur> =
<length [0,∞]>#
<box-shadow-spread> =
<length>#
<box-shadow-position> =
[ outset | inset ]#
<color-mix()> =
color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
<color-mix()> =
color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
column-count =
auto |
<integer [1,∞]>
column-count =
auto |
<integer [1,∞]>
column-rule-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
column-rule =
<'column-rule-width'> ||
<'column-rule-style'> ||
<'column-rule-color'>
<column-rule-width> =
<line-width>
<column-rule-style> =
<line-style>
<column-rule-color> =
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
column-rule =
<'column-rule-width'> ||
<'column-rule-style'> ||
<'column-rule-color'>
<column-rule-width> =
<line-width>
<column-rule-style> =
<line-style>
<column-rule-color> =
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
column-width =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
column-width =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
columns =
<'column-width'> ||
<'column-count'>
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<length-percentage> =
<length> |
<percentage>
columns =
<'column-width'> ||
<'column-count'>
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<length-percentage> =
<length> |
<percentage>
<cross-fade()> =
cross-fade( <cf-image># )
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
<cross-fade()> =
cross-fade( <cf-image># )
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
flex-grow =
<number [0,∞]>
flex-grow =
<number [0,∞]>
flex-shrink =
<number [0,∞]>
flex-shrink =
<number [0,∞]>
flex =
none |
[ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<flex-grow> =
<number [0,∞]>
<flex-shrink> =
<number [0,∞]>
<flex-basis> =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
flex =
none |
[ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<flex-grow> =
<number [0,∞]>
<flex-shrink> =
<number [0,∞]>
<flex-basis> =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
font-palette =
normal |
light |
dark |
<palette-identifier> |
<palette-mix()>
<palette-mix()> =
palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
font-palette =
normal |
light |
dark |
<palette-identifier> |
<palette-mix()>
<palette-mix()> =
palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
font-size-adjust =
none |
<number [0,∞]>
font-size-adjust =
none |
<number [0,∞]>
font-weight =
<font-weight-absolute> |
bolder |
lighter
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
font-weight =
<font-weight-absolute> |
bolder |
lighter
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
font =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
<system-family-name>
<font-style> =
normal |
italic |
oblique <angle [-90deg,90deg]>?
<font-variant-css2> =
normal |
small-caps
<font-weight> =
<font-weight-absolute> |
bolder |
lighter
<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |
math
<line-height> =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<font-family> =
[ <family-name> | <generic-family> ]#
<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
<length-percentage> =
<length> |
<percentage>
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
generic( <custom-ident>+ ) |
<string> |
<custom-ident>+
font =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
<system-family-name>
<font-style> =
normal |
italic |
oblique <angle [-90deg,90deg]>?
<font-variant-css2> =
normal |
small-caps
<font-weight> =
<font-weight-absolute> |
bolder |
lighter
<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |
math
<line-height> =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<font-family> =
[ <family-name> | <generic-family> ]#
<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
<length-percentage> =
<length> |
<percentage>
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
generic( <custom-ident>+ ) |
<string> |
<custom-ident>+
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> |
<radial-gradient()> |
<repeating-radial-gradient()>
<linear-gradient()> =
linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )
<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )
<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> |
<radial-gradient()> |
<repeating-radial-gradient()>
<linear-gradient()> =
linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )
<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )
<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
grid-area =
<grid-line> [ / <grid-line> ]{0,3}
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-area =
<grid-line> [ / <grid-line> ]{0,3}
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-auto-columns =
<track-size>+
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
grid-auto-columns =
<track-size>+
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
grid-auto-rows =
<track-size>+
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
grid-auto-rows =
<track-size>+
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
grid-column-end =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-column-end =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-column-start =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-column-start =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-column =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-column =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-row-end =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-row-end =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-row-start =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-row-start =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-row =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-row =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
grid-template-columns =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<fixed-breadth> =
<length-percentage [0,∞]>
grid-template-columns =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<fixed-breadth> =
<length-percentage [0,∞]>
grid-template-rows =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<fixed-breadth> =
<length-percentage [0,∞]>
grid-template-rows =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<fixed-breadth> =
<length-percentage [0,∞]>
grid-template =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<fixed-breadth> =
<length-percentage [0,∞]>
grid-template =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<fixed-breadth> =
<length-percentage [0,∞]>
grid =
<'grid-template'> |
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
<grid-template> =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<grid-auto-columns> =
<track-size>+
<grid-auto-rows> =
<track-size>+
<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<fixed-breadth> =
<length-percentage [0,∞]>
grid =
<'grid-template'> |
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
<grid-template> =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<grid-auto-columns> =
<track-size>+
<grid-auto-rows> =
<track-size>+
<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?
<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<fixed-breadth> =
<length-percentage [0,∞]>
initial-letter =
normal |
<number [1,∞]> <integer [1,∞]> |
<number [1,∞]> && [ drop | raise ]?
line-height-step =
<length [0,∞]>
line-height-step =
<length [0,∞]>
line-height =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
line-height =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
offset =
[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?
<offset-position> =
normal |
auto |
<position>
<offset-path> =
none |
<offset-path> || <coord-box>
<offset-distance> =
<length-percentage>
<offset-rotate> =
[ auto | reverse ] ||
<angle>
<offset-anchor> =
auto |
<position>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<offset-path> =
<ray()> |
<url> |
<basic-shape>
<coord-box> =
<paint-box> |
view-box
<length-percentage> =
<length> |
<percentage>
<ray()> =
ray( <angle> &&
<ray-size>? &&
contain? &&
[ at <position> ]? )
<url> =
<url()> |
<src()>
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<ray-size> =
closest-side |
closest-corner |
farthest-side |
farthest-corner |
sides
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
<visual-box> =
content-box |
padding-box |
border-box
offset =
[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?
<offset-position> =
normal |
auto |
<position>
<offset-path> =
none |
<offset-path> || <coord-box>
<offset-distance> =
<length-percentage>
<offset-rotate> =
[ auto | reverse ] ||
<angle>
<offset-anchor> =
auto |
<position>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<offset-path> =
<ray()> |
<url> |
<basic-shape>
<coord-box> =
<paint-box> |
view-box
<length-percentage> =
<length> |
<percentage>
<ray()> =
ray( <angle> &&
<ray-size>? &&
contain? &&
[ at <position> ]? )
<url> =
<url()> |
<src()>
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<ray-size> =
closest-side |
closest-corner |
farthest-side |
farthest-corner |
sides
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
<visual-box> =
content-box |
padding-box |
border-box
orphans =
<integer [1,∞]>
orphans =
<integer [1,∞]>
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
outline =
<'outline-color'> ||
<'outline-style'> ||
<'outline-width'>
<outline-color> =
auto |
[ <color> | <image-1D> ]
<outline-style> =
auto |
<outline-line-style>
<outline-width> =
<line-width>
<image-1D> =
<stripes()>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
outline =
<'outline-color'> ||
<'outline-style'> ||
<'outline-width'>
<outline-color> =
auto |
[ <color> | <image-1D> ]
<outline-style> =
auto |
<outline-line-style>
<outline-width> =
<line-width>
<image-1D> =
<stripes()>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
overflow-clip-margin =
<visual-box> ||
<length [0,∞]>
<visual-box> =
content-box |
padding-box |
border-box
overflow-clip-margin =
<visual-box> ||
<length [0,∞]>
<visual-box> =
content-box |
padding-box |
border-box
perspective =
none |
<length [0,∞]>
perspective =
none |
<length [0,∞]>
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
tab-size =
<number [0,∞]> |
<length [0,∞]>
tab-size =
<number [0,∞]> |
<length [0,∞]>
text-size-adjust =
auto |
none |
<percentage [0,∞]>
transition-duration =
<time [0s,∞]>#
transition-duration =
<time [0s,∞]>#
widows =
<integer [1,∞]>
widows =
<integer [1,∞]>