1.CSS3 Border:
the RADIUS-border: CSS3 rounded corners. Add rounded rectangle in CSS2 requires skill, we have to use a different picture each fillet in CSS3, create rounded corners is very easy, in the CSS3, border-radius property is used to create the fillet. border: 2px Solid;
Box-Shadow: CSS3 dark borders. In the CSS3, box-shadow is used to add a shadow box. Shadow-Box: 10px 10px 5px # 888888;
border-Image: CSS3 border picture. By CSS3 border-image property, you can use the pictures to create a border. border-image: url (border.png) 30 30 round;
2.CSS3 background:
** background-size: ** specified size of the background image. Before CSS3, the background image size is determined by the actual size of the picture. In CSS3, the background image size can be specified, which allows us to re-use background images in different environments. You can either pixels or percentages specified size. If the size of a predetermined percentage, then the size of the parent element with respect to the width and height.
background-origin: specified location area of the background image. Background images can be placed in content-box, padding-box or border-box area.
3.CSS3 text effects:
text-shadow: In the CSS3, text-shadow can be applied to a text shadow. Shadow-text: 5px 5px 5px #FFFFFF;
Word-wrap: a word too long, then it may not exceed a certain area, allowing split long words, and wraps to the next line: p {word-wrap: break -word; }
4.CSS3 2D conversion:
transform: By CSS3 conversion, the elements we are able to move, scale, rotation, elongation or stretching.
translate (): the element from its current position, according to a given left (x-coordinate) and the top (y coordinate) location parameters: transform: translate (50px, 100px ); value translate (50px, 100px) from the left side of the element moving the pixel 50, the pixel 100 moves from the top.
: rotate () rotating clockwise a given angle elements. Allow negative element rotates counterclockwise. transform: rotate (30deg); value rotate (30deg) of the rotating element 30 clockwise.
scale (): the elements increase or decrease the size, according to a given width (X-axis) and height (Y axis) parameters: transform: scale (2,4); value scale (2,4) is converted to the width of the original twice the size, the height is converted to four times the original height.
skew (): the element is rotated to a predetermined angle according to a given horizontal line (X-axis) and vertical lines (Y-axis) parameters: transform: skew (30deg, 20deg ); about the X-axis value skew (30deg, 20deg) the elements rotated 30 degrees about the Y-axis rotated 20 degrees.
Matrix (): Matrix () method to combine all the 2D conversion method. matrix () method requires six parameters including math functions that allow you to: rotate, zoom, and tilt the mobile element.
5.CSS3 3D conversion:
rotateX (): the element about its axis X at a given degree of rotation. Transform: rotateX (120deg);
rotateY (): the element about its axis Y at a given degree of rotation. transform: rotateY (120deg);
6.CSS3 transition: when converting from one style element to the effect of addition of an element when a different style.
7.CSS3 Animation: by CSS3, we can create animations which can replace the animated pictures in a number of web pages, Flash animations and JavaScript.
8.CSS3 multiple columns:
column-count: specified number of columns of elements should be separated.
column-gap: a predetermined spacing between the columns.
column-rule: setting the width, style, and color rule between columns.
9.CSS3 user interface
resize: attribute specifies whether the element size can be adjusted by the user.
box-sizing: property allows you to define the exact contents of a specific area of adaptation.
outline-offset: attribute profile offset, and drawn at a position beyond the contour of the edge of the border.
