Analysis of the use method of CSS3

I used to have a period of time using CSS3 to develop some small parts and effects, but because too long did not go to use, resulting in the use of their own again when I need to go through the manual and then press the method to use.

Now I will show you the use of this CSS3 skills to develop friends, I hope that your use is helpful.

Incidentally, I will be in the back of the whole set of Css3,php,mysql development Notes pack to Baidu Cloud, there is a need to go directly to the Baidu cloud download, so that after you develop can directly turn the notes without Baidu search so troublesome.

Note Link: Http://pan.baidu.com/s/1qYdQdKK Password: pvj2

First, CSS3 background and border-related styles

The following mainly describes the use of several CSS3 functions.

The 1.background-clip function, which is used for the display position of the background map.

1.background-clip:padding-box---> Border has a background content-box only the content line has background border-box border with background note: Need to cooperate with padding .2.background-origin:padding-box---> Border has a background content-box only the content line has background border-box border with the background is mainly can add a background picture, The upper left corner of the background image is displayed (you can set the display position, provided the photo must be small enough) 3.background-image:url (""), url (""); Background-repeat:repeat-x,no-repeat;background-position:100%,100%,center; (You can set the display percent position of the picture) is mainly used to display two background pictures, and the first one is smaller than the second one, so that the first picture is above the second one. (Multiple Overlays) Note: The proposed picture is transparent, there will be a demarcation 4.border-radius:10px 10px 10px 10px, (respectively, the angle is left and right lower left) four corner can be set to round the border 5.-webkit-border-image:url ( "") 10 10 10 10; Used to stretch a picture, four values in order: top left and bottom right (four sides of a square)

Second, CSS3 animation
CSS3 animation is the core function of CSS3, this is very common. And it's also important.

1.transition:background 1s linear,width 1s linear,height 1s linear,transform 1s linear; (can be set on the background, any other elements, excessive time, linear Linear) Note: You also need to match the pseudo-class to achieve the effect of the gradient (the property can use all, all refers to all attributes to give the transition effect) can also be written separately: Transition-duration:1s;transition-property: Background,transform,width;transition-timing-function:linear;2. How to implement the div color gradient Div{animation:anima (this is the animated name) 5s Infinite Alternate; /*infinite Alternate can repeatedly play animation */-webkit-animation:anima 5s infinite Alternate;} @-webkit-keyframes Mycolor{0%{background-color:blue;} 35%{background-color:green;} 60%{background-color:orange;} 80%{background-color:yellow;} 100%{background-color:aqua;}} #div1: Hover{-webkit-animation:mycolor 10s linear;} 3. Achieve the effect of the picture rotation @-webkit-keyframes mycolor{0%{background-color:blue;transform:rotate (0deg);} 35%{background-color:green;transform:rotate (30deg);} 60%{background-color:orange;transform:rotate (60deg);} 80%{background-color:yellow;transform:rotate (30deg);} 100%{background-color:aqua;transform:rotate ( -30DEG);}} #div1: Hover{-webkit-animation:mycolor 5s ease;} Note: These areAttribute value linear ease-in (slow) ease-out (slow) ease (slowly) ease-in-out (slow) 4. CSS3 the effect (can be used to do the picture waterfall flow)-webkit-column-count:2; /* Divide two columns */column-gap:50px;/* pitch */-webkit-column-gap:50px;/* spacing */column-rule:1px outset #ff0000;/* Spacer line Settings */- webkit-column-rule:1px outset #ff0000; column-width:250px;/* set column width */-webkit-column-width:250px;

　　

Three, CSS3 box related style

This CSS3 box style in fact CSS also has, not too many differences.

  The 1.display setting shows the background length of the inline display as a line, that is, the number of elements to show how many inline-block and blocks display the length of this div or span inline-table   Only for the table to use, you can let the table up and down the statement a line display List-item can make a div like a list to display 2.overflow hidden can hide the extra scroll can be redundant and then scroll to see overflow-x: Hidden/scroll  Let the horizontal hide or scroll to view White-space:nowrap horizontal display content 3.box-shadow:10px 10px 10px #ccc;(respectively corresponding to the shadow left and right offset blur shadow color) 4. Box-sizing:content-box/border-box;     Be sure to use with padding to change  (Content-box will make box bigger, border-box won't make box bigger)

　　

Iv. CSS3 text and text-related styles

The main method is to modify and make the font.

1.text-shadow:5px 5px 5px red,9px 13px 10px blue,8px 12px 10px #ccc; Font Shadow area display (same as Box-shadow) 2. Set the font @font-face{/* you can set the font */font-family:webfont;/* ttf:0 otf:t */src:url (' Ygyxsziti2.0.ttf ' ) Format ("TrueType");} Div{font-family:webfont;} 3.font-size-adjust:0.57; Set the same font display size 4.text-transform:capitalize: Converts the first letter of each word to uppercase uppercase: Converts each word to uppercase lowercase: converts each word to lowercase 5.white-space: Pre-wrap: Displays preformatted text in equal-width font, does not combine whitespace between text, and wraps when text touches the boundary. Pre-line: Preserves text wrapping, does not preserve whitespace between text, and wraps when text touches the boundary. 6.writing-mode writing format-WEBKIT-WRITING-MODE:VERTICAL-RL;WRITING-MODE:TB-RL;HORIZONTAL-TB: The horizontal direction of the top-down writing style. That is, left-right-top-bottom (ie private value LR-TB) Vertical-rl: The vertical direction from the right and left the way to write. That is top-bottom-right-left (ie private value tb-rl) VERTICAL-LR: The vertical direction from the left to the right of the writing way. That is TOP-BOTTOM-LEFT-RIGHTLR-TB: left-right, up-down. The content in the object flows from left to right in the horizontal direction, and the next line is below the previous line. All glyphs are vertical and upward. This layout is used by the Roman language (IE) TB-RL: Up-down, right-left. The content in the object flows vertically from top to bottom, from right to left. The latter vertical lines on the left of the previous vertical lines. The full-width character is vertical, half-width such as the Latin alphabet or katakana 90 degrees clockwise. This layout is commonly used by the East Asian Language (IE) 7. Text overflow text-overflow:clip: When inline content overflows the block container, the overflow portion is trimmed off. Ellipsis: When inline content overflows the block container, replace the overflow part with the (... ）。 

　　

V. CSS3 Selector

The so-called selector is for all of this category can be selected to use.

1. The wildcard selector [id*=div]{/* As long as the ID has a div can be changed color */color:yellow;} [Id^=div] {/* As long as the ID starts with the div is changed color */color:green;} [Id$=y] {/* As long as the ID starts with Y are changed color */color:red;} 2.div ~ p{color:red;} The P tag below the sibling div is modified by the style example: <div id= "Div1" > Example 1<div id= "Div2" >

　　

Six, the deformation treatment in CSS3

This is a very common use of the graphics to decorate.

1./* rotation zoom move Tilt *//* rotation transform:rotate (45deg)-webkit-transform:rotate (45deg) *//* zoom Transform:scale (1,5);- Webkit-transform:scale (1,5); *//* tilt Transform:skew (30deg,30deg);-webkit-transform:skew (30deg,30deg); *//* Move */ Transform:translate (0px,250px);-webkit-transform:translate (0px,250px);   Example:    -webkit-transform:translatex ( -100%);    Transform:translatex (-100%); 2. Graphic Transformation datum point transform-origin:right bottom;3. Graphics warp processing can be combined to write transform:rotate (200deg) scale (2.5) skew (210deg,100deg);

　　

Vii. pseudo-Class selectors

This pseudo-class style is very common.

1. Type focus E:focus {srules}input:focus{background: #f6f6f6; color: #f60; border:1px solid #f60; outline:none;} 2. Except this no other has this style e:not (s) {srules}p:not (. abc) {color: #f00;} 3. Root attribute e:root {srules}html:root. Test {color:purple\0;}

　　

Eight, CSS3 color gradient effect

1. Color gradient background-image:linear-gradient (to left, red, orange,yellow,green,blue,indigo,violet); Example: Background-image: -webkit-linear-gradient (Rgba (41,41,41,0.75) 0%,rgba (54,54,54,0.72) 50%,rgba (24,23,23,0.94) 51%); 2. Color Gradient Properties: Background:-webkit-gradient (Linear,left top,right bottom,from (#6cc3fe), to (#21A1D0)); Small knowledge Point: 1. When you need to hide some properties, you can use: o Verflow:hidden; The box is then set with the hover pseudo-class left:0 (Postion:absolute;left-width (the corresponding width);) is required before hiding. You can then use the hover to display the content box. 2. It is also possible to use Display:none; (no attributes are available at the beginning of the display);  Then turn it into a block display:block when the mouse is put on it (and then you can add a height:0 (without a height) to the effect by adding a pseudo-class. 3. With the label label, you can use the for= "relative ID" to control an element, with the same CSS  and ~ can control the associated div has the same CSS style 4. Making 180-degree picture rotation change text effect tip: <div id= "All" > <div class= "Rotate" > <div class= "wz" > Text content </div></div></div> When you want to rotate : The text needs to rotate 180 degrees, the rotate part needs to rotate 180, (need to overdo the effect also uses transition) style to write:. Con:hover. rotate{}

　　

All of them are very common CSS3 style decorated text. In fact, CSS3 can be quickly started by looking at manuals, so it is easy to master.

Note Link: Http://pan.baidu.com/s/1qYdQdKK Password: pvj2

Analysis of the use method of CSS3