first, background cutting background-clip
- Syntax: Background-clip:border-box | Padding-box | Content-box;
- Border-box out of the border outside of the background cut off
- Padding-box out of the padding outside of the background cut off
- Content-box outside the content of the background cut off
Second, background origin (define the starting point or center point) background-origin
- Syntax: Background-origin:border-box | Padding-box | Content-box;
- Border-box picture starts with the corner of the upper-left corner of border
- Padding-box picture starts with the corner of padding's top left corner
- Content-box picture starts at the top left corner of the content range
third, the background size background-size
- background-size:100px 200px According to the real pixel of the image;
- The percentage is relative to the container to pave (content+padding) background-size:100% 100%;
- is the original background image of the true size Background-size:auto;
- Will fill the container, but there will be some background overflow background-size:cover;
- will not fill the container background-size:contain;
Iv.. Gradients
- linear gradient: no direction. The is from top to bottom (default) ; When you specify an angle, 0 degrees is left to right and the angle is counterclockwise The changes.
- Syntax: Background:-webkit- linear-gradient (horizontal starting point vertical start/angle, color 1 Percent 1, color 2 percent 2 , color n percent n); percent can be converted to pixels
- Example:
- duplicates when changed to-webkit-repeating-linear-gradient
- Example:
- radial gradient: There is no direction when there is an intermediate outward ; When you specify an angle, 0 degrees is left to right and the angle is changes.
- Syntax: background:-webkit-radial-gradient (horizontal starting point vertical start/angle, color 1 percent 1, color 2 percent 2 , Color n percent than n); The percentage can be converted to a pixel
- parameter with linear gradient same, except for one more optional parameter-shape (ellipse (ellipse) | Circle (Circle)) ; general default is ellipse
- example:
Filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #ff0000, endcolorstr= #010101)"; +background: #f9f9f9;
v. Masking mask (mask)
- -webkit-mask-image:url/gradient; Place a mask layer
- -webkit-mask-repeat:repeat | Repeat-x | repeat-y | No-repeat;
- -webkit-mask-position:x y; mask move position
- Example:
VI. Reflection (Reflect)
- -webkit-box-reflect: The position spacing can be gradient (optional);
- Location: Above (reflection on top of object), below (bottom), left (right)
- Spacing: Pixel values
- Example:
Seven, rotation (rotate)--2d rotation
- Grammar:
- -webkit-transform:rotate (angle); Clockwise rotation
- -webkit-transform-origin:x axis position y-axis position;
- Function: center point of rotation
- The location can be: left | Right | Top | Bottom | Pixel | Percentage
- Example:
Viii. Mobile (translate)
- Grammar:
- -webkit-transform:translate (x-axis moving position y-axis moving position);
- -webkit-transform:translatex (length); just x-axis movement
- -webkit-transform:translatey (length); Just y-axis movement
- Example:
Nine, zoom scale--2d zoom
- -webkit-transform:scale (x-axis scaling y-axis scaling multiple);
- -webkit-transform:scalex (number); zoom only on the x-axis
- -webkit-transform:scaley (number); scale only the y-axis
- Example:
10. Twist Skew (counterclockwise)
- -webkit-transform:skew (x-axis twist angle, y-axis twist angle);
- -WEBKIT-TRANSFORM:SKEWX (angle); warp by x-axis
- -webkit-transform:skewy (angle), twisted by the y-axis
- Example:
Note:Six ~ Ten for deformation, differentOrderHave a different effect.Change in the order of succession
CSS3 gradient, background, reflection, deformation
