Css3_ must have 10 things

1. Bezel fillet (Border radiuas)

This is what we used to be common, before I used div fillet, especially special pain, whether it is to use CSS to draw rounded corners, or pictures to draw round corners are not so easy, but now good, in the CSS3, directly only need such as the following hungry code, you can make a beautiful round corner effect ~ ~ ~

{Border: 1px solid #699; /*  */-moz-border-radius: 20px; /*  */-webkit-border-radius: 20px;}

2. Box Shadow (Box Shadow)

#box1{Border:1px solid #699;-moz-box-shadow:5px-5px 5px #b6ebf7;-webkit-box-shadow:5px-5px 5px #b6ebf7;width:100px;Height:100px;Margin-left:100px;Margin-top:100px;Background-color:Gray;Border-color:Yellow; }

It is important to note that it has 4 parameters:

First parameter: The position of the horizontal offset, which has a positive or negative number. If it is positive, then the right side of the border is shaded, or if it is negative, the left box has a shadow effect.

Second parameter: The position of the vertical offset. It also has positive or negative numbers. If it is a positive number, then the bottom (bottom) border has a shadow, otherwise if it is negative, then its top (top) border has a shadow.

Third parameter: The size of a shadow

The fourth parameter: color, this is very well understood.

Note that the second argument above, I use a negative number.

There is a box shadow, there is a property is Text-shadow, this is mainly used in the text above.

The code is as follows:

<div style= "Background-color: #535353; Color: #353535; font-family: Microsoft ya black; font-size:64px; padding:20px; Font-weight:bold; " >    <span style= "Text-shadow: -2px-2px 2px #0D0D0D, 0px 0px 5px #aaa;" >welcome to my home!</span><br>    <span style= "text-shadow:2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;" >welcome to my home!</span><br>    <span style= "text-shadow:2px 2px 2px #000, 0px 0px 10px #fff, 0px 0 PX 20px #fff; " >welcome to my home!</span><br>    <span style= "color:white; text-shadow:0px 0px 10px #fff, 0px 0px 2 0px #fff, 0px 0px 40px #9dd; " >welcome to my home!</span> </div>

3. Transparency (Transparency or RGBA)

The transparency of the set element has always been a tricky issue, with different browsers being used differently.

For example, I used to set the transparency as follows: " Note: This method is not recommended "

CSS transparency under Firefox, Safari, Chrome and Opera

{      opacity: . 7;  

CSS transparency under IE

{      filter: Alpha (opacity=40);  }  

The method syntax for IE8 CSS transparency is as follows

{filter: progid:DXImageTransform.Microsoft.Alpha (opacity=40); /*  */-ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=40)"; /* */}

The transparency settings required for older versions of Firefox and Safari:

#myElement {      -khtml-opacity:. 5;      -moz-opacity:0.5;  }  

is not particularly special pit dad Ah! ~ ~.

Fortunately, we are now living in a perfect time, after CSS 3 comes out, a new noun is the property of transparency (transparency).

The code is as follows:

#box3 {Background-color:rgba (110, 142, 185,. 5);}

There are 4 parameters, the first 3 parameters particularly good understanding, is the RGB color (don't tell me, do not know what is called RGB color value, do not know the pull out to play fart), the most important thing is the fourth value. Its value is between 0 and 1, and the larger the value, the more opaque it is.

However, do not be happy too early, here or there is a special example, you may also think of Microsoft's ie. Microsoft always likes the whole thing that is different from other people, exhausted is our programmer.

IE understands the above statement, directly understood as the background color, but does not understand as RGBA. In order to ensure perfect compatibility in all browsers for our development, we need to fix the following:

#box3 {/* for all browsers */background-color: #6e8eb9;} Body:last-child #box3 {/* Exclude all IE browsers Using:last-child */background-color:rgba (A, 142, 185,. 5)!important; }

:last-child 是伪选择器，在CSS2开始在css中使用选择器。IE 对这个是不认识，所以它不会执行它后面的代码。


As a result, the perfect compatibility is achieved above.

Instance:

4. Number of columns (Columns) layout

This means that the contents of the inside of the box can be divided into several columns.

First on the code:

#box1        {            border:1px solid #699;             /* for Mozilla Firefox */            -moz-column-count:2;            -moz-column-gap:20px;            -moz-column-rule:1px solid #6e8eb9;                         /* for Safari & Google Chrome */            -webkit-column-count:2;            -webkit-column-gap:20px;            -webkit-column-rule:1px solid #6e8eb9;                       margin-left:100px;            margin-top:100px;            Border-color:yellow;            Background-color:gray;        }

-moz-column-count: Represents the number of columns, such as 2, which means that 2 is divided into 2 columns.

-moz-column-rule: Represents the style of the middle split line.

Instance:

Above the first I layered 2 columns, and the second one I was divided into 3 columns.

There is the first-webkit-column-rule:3px solid #6e8eb9; I set it so that its dividing line is bold.

5. Display multiple background images

You can apply multiple background images to a tag element. The code is similar to the css2.0 version, but the reference picture needs to be separated by a comma. The first image is positioned on the topmost background of the element, followed by a background image that appears below it, as follows:

Background-image:url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);

The code is as follows:

border:1px solid #699;            Background:url (/nature/bird1-thumb.png) no-repeat 0 0, url (/nature/apple.jpg) no-repeat 100% 0;            border:1px solid #699;            padding:0 20px;            margin-left:100px;            margin-top:100px;            Border-color:yellow;            Background-color:gray;            width:400px;            height:300px;

Instance:

However, here is still not happy too early, and Microsoft that the child is nothing to do, and here to engage in a incompatibility, so you must not under the code, in order to be compatible with the browser:

#box5 blockquote {/* used in all browsers */background:url (/i/quotel.gif) 0 0 no-repeat;padding:0 20px;} Body:last-child #box5 blockquote{/* used in browsers other than IE: Last-child */background:url (/i/quotel.gif) no-repeat 0 0, url (/i/ quoter.gif) no-repeat 100% 0;}

That's OK.

6. Contour (Outlines)

That is, the inside of the box is drawing a box.

The code is as follows:

#box1        {            border:1px solid #000;             Outline: 1px solid #699;            Outline-offset: -20px;            border:1px solid #699;            padding:0 20px;            margin-left:100px;            margin-top:100px;            Border-color:yellow;            Background-color:gray;            width:400px;            height:300px;        }

The parameters are well understood: outline: 1px solid #699; the picture frame;

Outline-offset this represents the offset inside, the popular point is the distance.

Instance:

7. Background gradient (Background gradients)

As the name implies, the gradient is the color slowly beginning to fade. In CSS3, the gradient effect is very, very flexible and easy to use.

However, one thing to note here is that the settings between Firfox and Chrome are not as simple as the above.

Firfox's Code:

Background:-moz-linear-gradient (bottom, #b6ebf7, #fff 50%);

Code for Chrome or safari:

Background:-webkit-gradient (linear, left bottom, left top,color-stop (0, #b6ebf7), Color-stop (0.80, #fff));

Parameter interpretation, such as in Firfox,

The first parameter: bottom represents the location of the application, bottom is at the top, of course, you can also have other places, such as left in the box on the right side of the square, and the top is on the front! ~

In Chrome, Color-stop: The values used to denote the start and end, and the color inside. The remaining parameters are the same as above.

Instance:

8. Rotation (Rotate)

Rotation, as the name implies is the angle of rotation elements, very good understanding.

Code:

#box1        {            border:1px solid #000;            -moz-transform:rotate (20deg);            -webkit-transform:rotate (20deg);            border:1px solid #699;            padding:0 20px;            margin-left:100px;            margin-top:100px;            Border-color:yellow;            Background-color:gray;            width:400px;            height:300px;        }

Rotate (angle) inside the array is the meaning of the angle, deg is the English word degree the abbreviation of the degree of meaning.

Instance:

Attention:

If it is negative, it will turn in the opposite direction.

If it is more than 360 degrees, then the remainder will be calculated with 360, for example, if you write rotate (380deg), then its value is equivalent to rotate (20deg).

9. Reflection (Reflect)

Reflection, in fact, is the reflection effect.

The code is as follows:

#myFont        {            -webkit-box-reflect:below 10px-webkit-gradient (linear, left top, left bottom, from (transparent), To      (RGBA (255, 255, 255, 0.51));            font-size:30px;        }

Instance:

10. Conversion (Transitions)

Note: The second content is from Zhangxinxu's blog. Thank him for his efforts.

The effect is: smoothing the value of the CSS changes . Whether it is a click event, focus event, or mouse hover, as long as the value changes, is smooth, is the animation. As a result, as long as a whole station of the general class, it can be very easy to gradually enhance the animation effect, super practical value of the said.

Transition has the following specific properties:

Transition-property:*//Specify the nature of the transition, such as transition-property:backgrond, which means that backgound participates in the transition
transition-duration:*//Specifies the duration of this transition
transition-delay:*//Delay transition time
transition-timing-function:*//specifying transition types, with ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier

The above parameters are mainly used in the transition-timing-function. Indicates how fast or slow it is.

Code:

Html

<div id= "Transbox" class= "Trans_box" >        <div class= "trans_list ease" >            ease</div>        < Div class= "Trans_list ease_in" >            ease-in</div>        <div class= "Trans_list ease_out" >            ease-out</div>        <div class= "Trans_list ease_in_out" >            ease-in-out</div>        <div class = "Trans_list linear" >            linear</div>    </div>

CSS code:

 <style type= "Text/css" >. trans_box {padding:20px;        Background-color: #f0f3f9;            }. trans_list {width:10%;            height:64px;            margin:10px 0;            Background-color: #486AAA;            Color: #fff;        Text-align:center;            }. Ease {-webkit-transition:all 4s ease;            -moz-transition:all 4s ease;            -o-transition:all 4s ease;        Transition:all 4s ease;            }. ease_in {-webkit-transition:all 4s ease-in;            -moz-transition:all 4s ease-in;            -o-transition:all 4s ease-in;        Transition:all 4s ease-in;            }. ease_out {-webkit-transition:all 4s ease-out;            -moz-transition:all 4s ease-out;            -o-transition:all 4s ease-out;        Transition:all 4s ease-out; }. ease_in_out {-webkit-transitiOn:all 4s ease-in-out;            -moz-transition:all 4s ease-in-out;            -o-transition:all 4s ease-in-out;        Transition:all 4s ease-in-out;            }. Linear {-webkit-transition:all 4s linear;            -moz-transition:all 4s linear;            -o-transition:all 4s linear;        Transition:all 4s linear;            }. Trans_box:hover. trans_list,. Trans_box_hover. trans_list {margin-left:89%;            Background-color: #beceeb;            Color: #333;            -webkit-border-radius:25px;            -moz-border-radius:25px;            -o-border-radius:25px;            border-radius:25px;            -webkit-transform:rotate (360DEG);            -moz-transform:rotate (360DEG);            -o-transform:rotate (360DEG);        Transform:rotate (360DEG); } </style>

The main effect of this implementation is to move from the left to the right! ~ ~. Depending on the parameters, the speed is different.

Instance: When initializing:

After the instance:

Maybe some friends are not familiar with this 5 function, so their speed

Finally, dedicate 2 useful graphs:

CSS Properties

CSS Selector

Css3_ must have 10 things