First, the new selector

Structure pseudo class selector

: Root-- root selector
: Nth-child (an + b) - the sub-element selector. The subscript a is a multiple of the offset of b sub-element, n counted from zero. odd odd, even even.
: Nth-last-child (n) - the reciprocal of the n-th
: Last-child-- last
: That the only sub-elements only-child-- belonging to its parent element
...

Second, the new property

frame

border-image-- picture frame
border fillet border-radius--
border-shadow-- shadow

background

background-image-- background image
background-size-- size
background-origin-- location area
background-clip-- cutting property

Gradient

linear-gradient (direction, color-start1, color-stop1) - linear gradient
radial-gradient (shape size at position, start-color, ..., last-color) - the gradient from the center to the periphery

Text Effects

text-shadow
box-shadow
text-overflow: clip / ellipsis / string-- overflow text display form

Fonts

@ Font-face {...}

Third, an important attribute

1,2D, 3D conversion --transform

位移——translate(x,y)、translateX(n)、translateY(n)、translateZ(z)、translate3d(x,y,z)
缩放——scale(x,y)、scaleX(n)、scaleY(n)、scaleZ(z)、scale3d(x,y,z)
旋转——rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)
倾斜——skew(x-angle,y-angle)、skewX(angle)、skewY(angle)

2, the transition action --transition

When the trigger switch style / or pseudo-classes.

transition-property - name specified set of CSS properties transition effects.
How many seconds or milliseconds transition-duration-- transitions required for completion.
transition-timing-function-- predetermined speed velocity profile effect.
When transition-delay-- to define the transition effect starts.

transform not trigger reflux. height, margin, padding, offsetTop, scrollTop, clientTop, getComputedStyle (), getBoundingClientRect so will trigger reflux

Bezier curve: cubic-bezier (n, n, n, n)

The slope of the curve is the size of the moving speed of the
curve websites

3, animations - @ keyframes and animation

animation is an acronym for the following attributes:

animation-name-- provisions need to be bound to a selector keyframe name. .
animation-duration-- predetermined animation takes time to complete, in seconds or milliseconds.
animation-timing-function-- predetermined speed of the animation curve.
animation-delay-- specified delay before the animation began.
The number of animation-iteration-count-- provisions animation should play.
Whether animation-direction-- provisions should turn reverse play the animation

@ Keyframes syntax is as follows:

@ keyframes animationname {
    keyframes-selector {
        property: style;
    }
}

animationname-- custom animation name
keyframes-selector - "from" and "to", is equivalent to 0% and 100%. Or percentage
property-- element attributes
style-- element styles

GPU can trigger deeper attributes are: transform, opacity, filter

Fourth, the elastic box --flex

display: flex; - elemental Flex layout, called flex container. It's all child elements automatically become members of the vessel, called flex project.

1, the parent element attributes

flex-flow: flex-direction || flex-wrap;

flex-direction: row | row-reverse | column | column-reverse; - the major axis direction (arrangement direction items)
flex-wrap: nowrap (does not wrap) | wrap (wrap) | wrap-reverse (line feed, reverse); - beyond wrap
justify-content: flex-start | flex-end | center | space-between | space-around; - spindle alignment (horizontal axis)
align-items: flex-start | flex-end | center | baseline | stretch; - longitudinal alignment
Alignment align-content-- telescopic stack row

2, the sub-element attributes

order-- sorting containing element, the front small
flex: none | flex-grow |flex-shrink|flex-basis
flex-grow-- as a ratio to the remaining space allocated spreading factor according to the elastic elements disposed cartridge.
If the sum is smaller than the parent basis cassette box width, the remaining width ratio according to grow.
The flex-shrink-- elastic shrinkage factor cartridge element set as a ratio to the contraction spatial
sum is greater than the parent box basis when the width of the box, the box shrink ratio of the sub-compression press, for example, 1: 1 ratio of compressed sub-boxes and the like.
flex-basis-- set or retrieve the flexible pouch telescoping reference value

Fifth, multimedia inquiry

1, grammar

@media mediatype and | not | only (media feature){
    CSS-Code;
}

2, the attribute value

(1) mediatype (media type)

All equipment all--
print-- printer
screen-- computer, tablet, mobile phone screen

(2) the media feature

height-- highly visible area of the device
Device visible region width width--
max-height-- visible region of maximum height
max-width-- maximum width
min-height-- minimum height
min-width-- minimum width

Sixth, responsive design --viewport

In the meta usage is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Properties are the following:

width - viewport (viewport) width
initial-scale-- initial scale. The page is first loaded scaling
Maximum maximum-scale-- allows the user to zoom ratio
minimum-scale-- allows the user to scale the minimum scale
Whether user-scalable-- user can manually zoom

Seven new units

Percentage vm-- viewport width, 1vm is one percent of the width
The percentage of the height of the viewport vh--
vmin - vw and vh among the smallest
vmax - vw and vh one of the largest

5 CSS3 new features