CSS learning 2

CSS learning 2

Border attributes

Attribute	Description	CSS
Border-image	Set the abbreviated attributes of all border-image-* attributes.	3
Border-radius	Set the abbreviated attributes of all four border-*-radius attributes.	3
Box-shadow	Add one or more shadows to the box.	3

Background attributes

Attribute	Description	CSS
Background-clip	Specifies the plotting area of the background.	3
Background-origin	Specifies the location of the background image.	3
Background-size	Specifies the size of the background image.	3

Text attributes

Attribute	Description	CSS
Hanging-punctuation	Specifies whether the punctuation character is outside the box.	3
Punctuation-trim	Specifies whether to trim punctuation marks.	3
Text-align-last	Sets how to align the last line or the line next to the forced line break.	3
Text-emphasis	Apply the highlight and the foreground color of the highlight to the text of the element.	3
Text-justify	Specifies the Alignment Method used when text-align is set to "justify.	3
Text-outline	Specifies the outline of the text.	3
Text-overflow	Specifies what happens when a text overflow contains elements.	3
Text-shadow	Add a shadow to the text.	3
Text-wrap	Specifies the text line feed rule.	3
Word-break	Specifies the line feed rules for non-Chinese-Japanese text.	3
Word-wrap	Separate long words and wrap them to the next line.	3

Font Descriptor

Descriptor	Value	Description
Font-family	Name	Required. Name of the specified font.
Src	URL	Required. Defines the URL of the font file.
Font-stretch	Normal Condensed Ultra-condensed Extra-condensed Semi-condensed Expanded Semi-expanded Extra-expanded Ultra-expanded	Optional. Defines how to stretch the font. The default value is "normal ".
Font-style	Ormal Italic Oblique	Optional. Defines the font style. The default value is "normal ".
Font-weight	Normal Bold 100 200 300 400 500 600 700 800 900	Optional. Defines the font width. The default value is "normal ".
Unicode-range	Unicode-range	Optional. Defines the UNICODE character range supported by the font. The default value is "U + 0-10FFFF ".

2D Conversion

Function	Description
Matrix (n, n)	Defines 2D conversions using a matrix of six values.
Translate (x, y)	Defines 2D conversions and moves elements along the X and Y axes.
TranslateX (n)	Defines 2D conversions and moves elements along the X axis.
TranslateY (n)	Defines 2D conversions and moves elements along the Y axis.
Scale (x, y)	Defines 2D scaling conversion to change the width and height of elements.
ScaleX (n)	Defines 2D scaling conversion to change the width of an element.
ScaleY (n)	Defines 2D scaling conversion to change the height of an element.
Rotate (angle)	Defines 2D rotation, which specifies the angle in the parameter.
Skew (x-angle, y-angle)	Defines 2D skew conversion along the X and Y axes.
SkewX (angle)	Defines 2D skew conversion along the X axis.
SkewY (angle)	Defines 2D skew conversion along the Y axis.

3D Conversion

Function	Description
Matrix3d (n, N, n)	Defines 3D conversion, using a 4x4 matrix of 16 values.
Translate3d (x, y, z)	Define 3D conversion.
TranslateX (x)	Defines 3D conversion. Only values used for the X axis are used.
TranslateY (y)	Defines 3D conversion and only uses values for Y axis.
TranslateZ (z)	Defines 3D conversion. Only values used for the Z axis are used.
Scale3d (x, y, z)	Defines 3D scaling and conversion.
ScaleX (x)	Defines 3D scaling conversion by specifying an X axis value.
ScaleY (y)	Defines 3D scaling conversion by specifying a value for the Y axis.
ScaleZ (z)	Defines 3D scaling conversion by specifying the value of a Z axis.
Rotate3d (x, y, z, angle)	Define 3D Rotation.
RotateX (angle)	Defines the 3D Rotation along the X axis.
RotateY (angle)	Defines the 3D Rotation along the Y axis.
RotateZ (angle)	Defines the 3D Rotation along the Z axis.
Perspective (n)	Defines the Perspective View of 3D conversion elements.

Animation attributes

Attribute	Description	CSS
@ Keyframes	Specifies the animation.	3
Animation	The short attribute of all animation properties except the animation-play-state attribute.	3
Animation-name	Specifies the name of the keyframes animation.	3
Animation-duration	Specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0.	3
Animation-timing-function	Specifies the animation speed curve. The default value is "renew ".	3
Animation-delay	Specifies when the animation starts. The default value is 0.	3
Animation-iteration-count	Specifies the number of times an animation is played. The default value is 1.	3
Animation-direction	Specifies whether the animation is played reversely in the next cycle. The default value is "normal ".	3
Animation-play-state	Specifies whether the animation is running or paused. The default value is "running ".	3
Animation-fill-mode	Specifies the State beyond the animation time of an object.	3

Multi-column attribute

Attribute	Description	CSS
Column-count	Specifies the number of columns that the element should be separated.	3
Column-fill	Specifies how to fill columns.	3
Column-gap	Specifies the interval between columns.	3
Column-rule	Set the short attribute of all column-rule-* attributes.	3
Column-rule-color	Specifies the color of the rule between columns.	3
Column-rule-style	Specifies the rule style between columns.	3
Column-rule-width	Specifies the width of the rule between columns.	3
Column-span	Specifies the number of columns that the element should span.	3
Column-width	Specifies the column width.	3
Columns	Set the short attribute of column-width and column-count.	3