CSS3 Related content

Different browsers may require different prefixes when writing CSS3 styles. But for a better forward compatibility prefix or not.
-webkit:chrome, and Safari; -moz:firefox; -ms:ie;-o:opeara;

CSS3 Benefits: He put a lot of previous needs of the use of pictures and scripts to achieve the effect, and even animation effects, just a few lines of code can be done. He simplifies the design process for developers and speeds up page loading.

Some of the effects of CSS3:

Border-radius: Adds a rounded border to an element:
His unit has training, percentages, EM, etc.
Box-shadow: Add a shadow to the box;

His grammar box-shadow:x the offset of the y-axis by the offset of the axis [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];
Shadow Blur radius: This parameter is optional, its value can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow edge is blurred; Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is expanded, the inverse value is negative, then

Text-shadow: Sets the shadow effect of the text;
Syntax: Text-shadow:x=offset y-offset blur color;

RGBA: Represents a color standard, RGBA is an RGB based on the addition of alpha transparency parameter syntax: Color:rgba (r,g,b, transparency parameters)
CSS3 Gradient Linear Gradient Linear-gradinet
Liner parameter: The first parameter specifies the direction of the gradient, (to top: indicates a lower-to-upper direction; to Bottom,to-left: Represents a right-to-the direction, to a right,to top left: The direction from the lower-right corner to the upper-upper corner, to top Can be used in the angle of keywords or English to represent 180deg;
The second argument and the third person parameter represent the starting and ending points of the color, and you can have multiple color values.
Embedded Font @font-face: He is able to load server-side font files, allowing the browser to display fonts that are not installed on the user's computer.
Syntax: @font-face{
font-family: Font name;
SRC: The relative path or absolute path of the font file on the server;
}
Background-origin: Sets the original position of the element background
Syntax: Background-origin:border-box|padding-box|content-box, but the background is no-repeat, this property is not valid, he will start from the border to display.
Background-clip: Used to tailor the background to fit the actual needs;
Syntax: Background-clip:border-box | Padding-box | Content-box | No-clip

Pseudo-class selectors in CSS3

: The root selector matches the element e in the document that contains it.
: The not negation selector, which selects all elements except an element, as with jquery's: not selector
: Empty is used to select elements that do not have any content, there is no content here refers to a little content is not;
: Target element of an identifier used by the target selector to match the URL of the document
: First-of-type: Used to locate the first child element of a type under a parent element.
: Last-of-type: Used to locate the last child element of a type under a parent element:
: Only-child: Only one child element in the parent element of the matching element, and is also a unique child element
:: Selection: Used to match the highlighted text, the general case with the mouse to select the page text is the default is the background is dark blue, the font is white. By:: Selection pseudo elements can be changed.
: ready-only pseudo-Class selector to specify the style of a read-only state element
: The Read-write pseudo-class selector is used to specify a style that is not a read-only state element.
:: Before and:: After
:: Before and:: After these two are used primarily to insert content in front or behind elements, these two are used in conjunction with "content", and the most common scenario is to clear floats.

There are similar: First-child and: last-child,:nth-child,:nth-last-child,:checked,:d isabled,:enabled, etc.

CSS3 Some of the animation effects in the function:
rotation function rotate (): Rotates the element relative to the origin by the specified angle parameter. A negative value indicates that the element is rotated counterclockwise relative to the origin. To cooperate with transform to use
Twist function Skew (): Enables the element to be tilted and the skew () function does not rotate, but only changes the shape of the element. He has three kinds of situations: 1.skew (x, y) 2.skewX (×) 3.skewY (y)
Scaling function Scale (): Allows the element to scale the object according to the center Origin point. He also has three kinds of situations: 1.scale (x, y) 2.scaleX (×) 3.scaleY (y)
The displacement function translate () Moves the element in the specified direction, and he also has three cases: 1.translate (x, y) 2.translateX (×) 3.translateY (y)

CSS3 Related content