Lists the new features of CSS3 and the new features of css3.

Lists the new features of CSS3 and the new features of css3.

After having been in contact with CSS3 for so long, it is always necessary to use it directly, but it has not been well summarized, so let's sort it out here.

CSS3 border:

Rounded border:

Key: border-radius

<! DOCTYPE html> 
 
CSS3 border shadow:
Key: box-shadow
Syntax: Object selector {box-shadow: [projection method,] X axis offset, Y axis offset [, shadow blur radius] [, shadow extended radius] [, shadow color]}
Projection Method: this parameter is optional. If no value is set, the default projection method is the external shadow. If its unique value is "inset", the projection method is the inner shadow;
X-offset: horizontal shadow offset. The value can be positive or negative. If the value is positive, the shadow is on the right of the object. If the value is negative, the shadow is on the left of the object;
Y-offset: the vertical offset of the Shadow. The value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object, and its value is negative, the shadow is at the top of the object;
Shadow blur radius: this parameter is optional, but its value can only be a positive value. If its value is 0, it indicates that the shadow has no blur effect, and the greater the value, the blurrier the edge of the shadow;
Radius of shadow Extension: this parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced;
Shadow color: this parameter is optional. If no color is set, the browser will take the default color, but the default color of each browser is inconsistent, especially in the safari and chrome browsers under the webkit kernel, it is black (verified) in Firefox/Opera. We recommend that you do not omit this parameter.
 
 
CSS3 border image:
Key:-webkit-border-image
For example:
Div {border-image: url(border.png) 30 round;-moz-border-image: url(border.png) 30 round;/* Firefox */-webkit-border-image: url(border.png) 30 30 round;/* Safari and Chrome */-o-border-image: url(border.png) 30 30 round;/* Opera */}
 
CSS3 Background:
The background-size attribute specifies the size of the background image.
Div {background: url(bg_flower.gif);-moz-background-size: 63px 100px;/* earlier Firefox */background-size: 63px 100px; background-repeat: no-repeat ;}
The background-origin attribute specifies the location of the background image.

div{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;}
CSS3 multi-background image
body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}
 
CSS3 text effects
CSS3 text shadow
h1{text-shadow: 5px 5px 5px #FF0000;}
CSS3 automatic line feed
p {word-wrap:break-word;}
In the new @ font-face rule, you must first define the font name (for example, myFirstFont) and then point to the font file.
To use a font for HTML elements, use the font-family attribute to reference the font name (myFirstFont ):
<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),     url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>
 
CSS3 2D Conversion
Translation: translate
div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);        /* IE 9 */-webkit-transform: translate(50px,100px);    /* Safari and Chrome */-o-transform: translate(50px,100px);        /* Opera */-moz-transform: translate(50px,100px);        /* Firefox */}
Rotation: rotate
div{transform: rotate(30deg);-ms-transform: rotate(30deg);        /* IE 9 */-webkit-transform: rotate(30deg);    /* Safari and Chrome */-o-transform: rotate(30deg);        /* Opera */-moz-transform: rotate(30deg);        /* Firefox */}
Scale: scale
By using the scale () method, the element size increases or decreases according to the given width (X axis) and height (Y axis) parameters:
Div {transform: scale (2, 4);-ms-transform: scale (2, 4);/* IE 9 */-webkit-transform: scale (2, 4 ); /* Safari and Chrome */-o-transform: scale (2, 4);/* Opera */-moz-transform: scale (2, 4);/* Firefox */}
Turning: skew
The skew () method is used to flip an element to a given angle based on the given horizontal line (X axis) and vertical line (Y axis) parameters:
div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg);    /* IE 9 */-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */-o-transform: skew(30deg,20deg);    /* Opera */-moz-transform: skew(30deg,20deg);    /* Firefox */}
 
CSS3 3d Conversion
RotateX ()
Rotate along the X axis
RotateY ()
Rotate along Y axis
 
CSS3 transition
With CSS3, we can add effects (smooth transition) to elements when elements are transformed from one style to another without Flash animation or JavaScript ).
Add transition effects to width, height, and conversion:
div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}
 
Summary:
You need to specify a starting and ending status,
Then add transition to the div: wide transition time, high transition time, and transition time
Transition: [wide transition time] [, high transition time] [, transition time]
 
CSS3 Animation
Set action @ keyframes
@keyframes myfirst{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}
Set category
.myaction{
　　animation:myfirst 5s;
}
Add the category class to the DIV
$("...").addClass('.myaction');
Note:
Syntax:
animation:name duration timing-function delay iteration-count direction
Name: @ Keyframes name
Duration: Specifies the time taken to complete the animation, in seconds or milliseconds.
Timing-function: Specifies the animation speed curve.

 

 
  
 
   
 
    
Timing-function value
 
    
Description
 
   
 
   
 
    
Linear
 
    
Uniform speed
 
   
 
   
 
    
Bytes
 
    
Slow speed
 
   
 
   
 
    
Callback-in
 
    
Low Speed
 
   
 
   
 
    
Timed-out
 
    
Low Speed end
 
   
 
   
 
    
Memory-in-out
 
    
Low Speed start and end
 
   
 
   
 
    
Cubic-bezr (n, n)
 
    
In the cubic-bezr function, the value ranges from 0 to 1.
 
   
 
  

 
 
 
 
 
 
 
 
Delay: The delay before the animation starts, in seconds.
Iteration-count: Specifies the number of times the animation is played: the specific value or infinite (unlimited ).
Direction: Specifies whether to play the animation in turn. Normal playback and alternate reverse playback in turn.
 
CSS3 multiple columns:
Create multiple columns for text Layout
Div {-moz-column-count: 3;/* Firefox */-webkit-column-count: 3;/* Safari and Chrome */column-count: 3 ;}
 
CSS3 user interface
div{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}
 
The new features of CSS3 are summarized here. I personally think that conversion and animation are the focus and need to be well mastered.