CSS3 Study Notes and css3 notes

CSS3 Study Notes and css3 notes

First, remember to add the prefix-webkit-,-moz-,-o-,-ms-. Because the compatibility between CSS 3 and html5.

Border:
1. border-radius (implementation of solid circles)
2. box-shadow: X axis offset Y axis offset [shadow blur radius] [shadow extended radius] [shadow color] [Projection mode] (overlapping effect with commas)
3. border-image: url(border.png) 70 70 70 round/repeat/stretch (the offset from the outer part to the inner part, which is the upper right bottom left)

Color:
1. RGBA (with an extra transparency)
2. color gradient: linear/radial gradient (to left, # fff, blue, red)

Text and Font:
1. text-overflow: clip (CUT) | ellipsis (display omitted)/* to achieve the effect of ellipsis when overflow occurs, you must also define the forced text to be displayed in one line (white-space: nowrap) and overflow content are hidden (overflow: hidden). Only in this way can the overflow text be displayed with ellipsis */
2. word-wrap: normal (Control of continuous Text wrap) | break-word (line feed of content within the boundary)
3. @ font-face {font-family: font name; src: Path of the font file on the server ;}
4. text-shadow: X-Offset Y-Offset blur color;

Background:
1. background-origin: border-box | padding-box | content-box;/* set the original start position of the element background image. If the background is not no-repeat, this attribute is invalid */
2. background-clip: border-box | padding-box | content-box | no-clip;
3. background-size: auto | <Length Value >|< percentage> | cover (fills the entire container) | contain (one side sticks to the container edge)/* sets the background image size, it is displayed as a length value or percentage. You can also use cover and contain to scale the image. */
4. Multi-background image

Selector:
1. added the attribute selector a [href ^ = val] (starting with) | a [href $ = val] (ending with) | a [href * = val] (including)
2./: root/: not/: empty/: target (used to match the style pointing to the link)
3. first-child (matching the first child element)/last-child/nth-child (number)/nth-last-child/(type) first-of-type/nth-of-type (2n)/: only-child (to control the style with only one child element)/only-of-type
4.: enabled/: checked/: selection selector (when the mouse is selected)/: read-only/: read-write/: before AND: after (used to clear floating, add shadow)

Deformation:
1. rotate (.. deg) (rotate)
2. skew (x y) (distorted)
3. scale (x, y) (scale)
4. translate (x, y) (displacement, which can be applied to the center)
5. matrix () (matrix, used for 2D transformation)
6. transition-duration (time required for transition)
7. transition-timing-function (linear/slow-in-out/slow-in) (the speed of transition over time)
8. transition-delay (used to specify how long the execution starts after the element attribute value is changed)

Animation:
1. Keyframes (similar to the Key Frame in Flash) (Format: Percentage {style })
2. animation-name (call the animation defined by Keyframes)
3. animation-duration (used to set the playback time of CSS3 animation)
4. animation-timing-function (mainly used to set the animation playback Mode)
5. animation-delay
6. animation-iteration-count (infinite | <number>)
7. animation-direction (normal, alternate)
8. animation-play-state (running and paused)
9. animation-fill-mode (none, forwards, backwords, and both) defines the operations that occur before and after the animation starts.

Layout:
1. columns: column width | Number of columns/columns-width (auto/column width)/column-count (auto/column number)
2. column-gap (column spacing)
3. column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color> (list Border)
4. column-span (cross-column setting)
5. Elastic Box Model
6. Scaling Layout