CSS3 Some properties

==text-shadow==

Syntax: Text-shadow:x-offset y-offset Blur-radius Color

Text-shadow:x axis offset y-axis offset blur radius shadow color

compatibility, compatible with standard browsers, ie you know

= parameter Description =

X-axis offset: Refers to the horizontal offset of the shadow, whose value can be a positive negative value, if the values are positive, just the shadow on the right side of the object, and vice versa, the shadow is on the left side of the object;

Y-axis offset: refers to the vertical offset of the shadow, its value can also be a positive negative value, if the values are positive, the shadow at the bottom of the object, and vice versa, the shadow at the top of the object;

Shadow Blur radius: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the larger the value, the more blurred the shadow edge;

Shadow color: This parameter is optional, if you do not set any color, the browser will take the default color value, the browser is not the same, especially in the WebKit kernel, Safari and Chrome browser resolution to colorless, that is so-called transparent, so it is not easy to figure it out yo,

= Actual application =

//css.t-shadow{    text-shadow:2px 2px 3px red;}. t-shadow2{    text-shadow:3px 2px 0px red;} HTML<class= "T-shadow">     text shadow </  Div><class= "T-shadow2">     Text Shadow </ Div >

==box-shadow==

Syntax: Box-shadow:inset x-offset y-offset Blur-radius Spread-redius Color

Box-shadow: Shadow type X-axis offset y-axis offset blur radius extension radius color

Compatibility IE9 and above Standard browser

= parameter Description =

Shadow type: This parameter is optional and, if no value is set, its default projection is an outer shadow, and if its unique value is inset, it is projected as an inner shadow

X-offset: Shadow horizontal offset, its value can be positive negative, if positive, the shadow is to the right of the object, and conversely its value is negative, the shadow is on the left side of the object;

Y-offset: Refers to the vertical offset of the shadow, its value is positive negative, if positive, the shadow at the bottom of the object, and conversely its value is negative, the shadow at the top of the object;

Shadow Blur radius: This parameter is also optional, its value can only be positive negative, if it is 0 o'clock, there is no shadow effect, the larger the value, the shadow blur radius is larger;

Shadow expansion radius: is also optional, the value can also be positive negative values, if the value is positive, then the entire shadow is extended, the inverse is negative, the shadow shrinks

Shadow color: Optional, if not set, the browser is also to take the default, and some are transparent, and Text-shadow is the same, try not to save the diagram, you have to write a value yo

= Actual application =

//css//The third value represents the shadow blur radius, and if omitted there is no blur effect, and the extension radius is the default. b-shadow{width:200px;    height:200px;    border:1px solid #ccc;    margin-left:50px;    -webkit-box-shadow:2px 2px 3px Red;    -moz-box-shadow:2px 2px 3px Red; box-shadow:2px 2px 3px Red;}    When you use multiple shadow properties for the same element, you need to be aware of its order, and the first-written shadow will appear at the top. b-shadow{width:200px;    height:200px;    border:1px solid #ccc;    margin-left:50px;    -webkit-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px Green;    -moz-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px Green; box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px Green; HTML<Divclass= "B-shadow">Box Shadow</Div>

If the previous shadow blur value is less than the shadow blur value that follows, the front shadow will cover the shadow effect behind if the blur value of the front shadow is greater than the shadow blur value that follows: b-shadow{    width:200px;    height:200px;    border:1px solid #ccc;    margin-left:50px;    /*box-shadow:0 0 5px red,0 0 15px blue;*/    box-shadow:0 0 15px red,0 0 5px Blue;

The four edges have the same shadow effect (only the shadow blur radius and shadow color are set). b-shadow{        box-shadow:0 0 5px Red;}

The four edges have the same shadow (only the shadow extension radius and shadow color are set). b-shadow{     box-shadow:0 0 0 1px Red;}

The inner shadow inset effect, but the IMG tag directly applies Box-shadow's inset without any effect. b-shadow{    box-shadow:inset 0 0 10px Red;}

IMG {box-shadow:inset 0 0 10px Red;} Don't do this.

Let the image img Implement the method of inner shadow, we put the img into a div, and then not directly on the IMG using the Box-shadow attribute, but on the IMG parent div to apply the Box-shadow, and then we are in the relative positioning of the IMG, And let it in the parent element next layer. b-shadow{    /*width:200px;    height:200px;*/    /*border:1px solid #ccc; * *    margin-left:50px;    -webkit-box-shadow:inset 0 0 10px Blue;    -moz-box-shadow:inset 0 0 10px Blue;    Box-shadow:inset 0 0 10px Blue;    Display:inline-block;}. B-shadow img{    position:relative; z-index:-1;    Display:block;}

Let the picture img Implement the method of inner shadow, we have changed an implementation method, this method we apply the pseudo element ": Before" to the IMG parent element to implement. b-shadow{    position:relative;    Display:inline-block;    *display:inline;}. b-shadow:before{    content: "";    Position:absolute;    width:100%;    height:100%;    -moz-box-shadow:inset 0 0 5px 1px blue;    -webkit-box-shadow:inset 0 0 5px 1px blue;    Box-shadow:inset 0 0 5px 1px blue; }. B-shadow img {     display:block;}

Add a shadow to the top of the body Body:before {     content: "";      position:fixed;     top:10px;     left:0;     width:100%;     height:10px;     z-index:999;      box-shadow:0 0 10px Red;}

//drop-shadow effect. B-shadow{width:300px;Height:150px;position:relative;background:#ccc; }. B-shadow:before,.b-shadow:after{content: "";position:Absolute;Z-index:-1;Bottom:15px; Left:10px;width:50%;Height:20%;/*Add Box-shadow*/-webkit-box-shadow:0 15px 10px rgba (125,125,125,0.8);-moz-box-shadow:0 15px 10px rgba (125,125,125,0.8);Box-shadow:0 15px 10px rgba (125,125,125,0.8);/*Add CSS3 Transform*/-webkit-transform:Rotate ( -3deg);-moz-transform:Rotate ( -3deg);-o-transform:Rotate ( -3deg);Transform:Rotate ( -3deg); }. B-shadow:after{ Right:10px; Left:Auto;-webkit-transform:Rotate (3deg);-moz-transform:Rotate (3deg);-o-transform:Rotate (3deg);Transform:Rotate (3deg); }

==transform==

Syntax: transform:rotate (rotation) | | Translate (MOBILE) | | Scale (scaling) | | Skew (twist) | | Matrix (matrices)

Compatibility: IE9 and above

Transform means deformation, change of meaning, in the CSS3 transform the main shifting properties: rotation rotate, moving translate, bloom scale, twist skew, and matrix deformation matrices

If one element is transform multiple properties such as rotate, translate scale, three kinds, multiple attributes separated by spaces, spaces Yo, pro, transform implements some of the same functionality that can be implemented with SVG, which can be used for line elements and block elements

First, rotate Rotate

Rotate (<angle>): Specifies a 2D rotation (2D rotation) of the original element with the specified angle parameter, preceded by the definition of the Transform-origin attribute. Transform-origin defines the base point of the rotation, where angle refers to the rotation angle, if the set value is a positive number for clockwise rotation, and if the value is set to a negative number, the counter-clockwise rotation. Example: Transform:rotate (30deg)

Second, mobile Translate

The moving translate is divided into three cases: translate (x, y) move horizontally and vertically (i.e. simultaneous movement of the y-axis and both); TranslateX (x) moves horizontally (x-axis movement); Translatey (y) Move vertically only (Y-axis movement), using the following method:

1, translate (tx,ty) indicates that the object is translated according to the set X, y parameter value, TX is the first transition value parameter, Ty is the second transition value parameter option, and Ty is 0 as its value if Ty is not provided. When the value is negative, the object is moved in the opposite direction, and its base point defaults to the center of the element and can also be changed based on the Transform-origin. such as Transform:translate (100px,20px)

2, TranslateX (TX): Specify a translation by the value given in the X direction. Moving elements only to the x-axis, as well as the center point of the element, can also change the base point position according to Transform-origin. Example: Transform:translatex (100px)

3. Translatey (ty): Specify a translation by the value given in the Y direction. Moving only to the y-axis, base point at the center of the element, can also change the base point position by Transform-origin. Example: Transform:translatey (20px)

Three, zoom Scale

Scaling scale and moving translate are extremely similar, and he also has three cases: scale (x, y) scales the elements horizontally and vertically (that is, simultaneous scaling of the y-axis and both); ScaleX (x) elements scale only horizontally (x-axis scaling); ScaleY (y) Elements are scaled only vertically (y-axis scaling), but they have the same zoom center point and cardinality, whose center point is the center of the element, the scale cardinality is 1, and if its value is greater than 1, the value is less than 1, and the element shrinks.

1. Scale (<number>[, <number>]): Provides two parameters that perform the [sx,sy] scaling vector to specify a 2D scale (2D scaling). If the second argument is not provided, take the same value as the first parameter. Scale (x, y) is used for scaling elements, which can be set by Transform-origin the base point of an element, the same base point at the center of the element, the X in the base represents a multiple of horizontal scaling, Y for the vertical direction, and y is an optional parameter, if Y is not set , the X, y two-directional zoom multiplier is the same, and is based on X. such as: Transform:scale (2,1.5)

2, ScaleX (<number>): Use the [sx,1] scaling vector to perform the scaling operation, SX is the desired parameter. ScaleX means that the element is scaled only on the x-axis (horizontally), his default value is (1), and its base point is at the center of the element, and we also change the base point of the element by Transform-origin. Example: Transform:scalex (2)

3, ScaleY (<number>): Use the [1,sy] scaling vector to perform the scaling operation, SY is the required parameter. ScaleY means that the element is scaled only on the y-axis (vertically), and its base point is also at the center of the element, and can be transform-origin to change the base point of the element. such as Transform:scaley (2)

Iv. Distortions Skew

Twisted skew and translate, scale also have three cases: skew (x, y) distorts the elements in both horizontal and vertical directions (both the × and Y axes are distorted at a certain angular value); skewx (x) only distorts the elements in the horizontal direction (distortion of the x-axis) Skewy (y) only distorts the element in the vertical direction (y-axis warp distortion)

1, skew (<angle> [, <angle>]): Skew transformation (oblique-cut transformation) on the x-axis y-axis. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the value is 0, which means there is no miter in the y-axis direction. The skew is used to distort the elements, the first parameter is the horizontal twist angle, and the second parameter is the vertical twist angle. The second parameter is an optional parameter, and if the second parameter is not set, then the y-axis is 0deg. Also at the center of the element, we can change the base point position of the element by Transform-origin. such as: Transform:skew (30DEG,10DEG)

2, Skewx (<angle>): Specify a skew transformation (oblique-cut transformation) along the x-axis at the given angle. Skewx is to make an element base on its center and distort it in the horizontal (x-axis) direction, as well as to change the base point of the element by Transform-origin. Example: Transform:skewx (30deg)

3, Skewy (<angle>): Specify a skew transformation (oblique-cut transformation) along the y-axis at the given angle. The skewy is used to set the element to its center base point and distort it in the vertical direction (Y axis) at the given angle. We can also change the base point of an element by Transform-origin. Example: Transform:skewy (10deg)

Five, Matrix Matrix

Transform:matrix (A,B,C,D,E,F);
is actually the transform: matrix(1, 0, 0, 1, 30, 30); same as transform: translate(30px, 30px); . Note translate : rotate All methods are required, and the units of the matrix method e, f parameters can be omitted.

Learn more about http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

Vi. In addition we need to understand the change element base point Transform-origin

Transform-origin Its main function is to allow us to change the base point position of the element before the transform action, because the default base point of our element is its central position, in other words we do not use Transform-origin to change the position of the element base point, Rotate,translate,scale,skew,matrix such as transform are changed at the center of the element's own location. But sometimes we need to perform these operations on elements in different locations, so we can use Transform-origin to change the base point position of the element so that the element base point is not in the central position to reach the base point you need.

Transform-origin (x, y): the base point (reference point) used to set the motion of the element. The default point is the center point of the element. where x and Y values can be a percent, em,px, where x can also be a character parameter value Left,center,right;y and X, in addition to the hundred points can also set the character value Top,center,bottom, this appears to have Dot like our background-position settings. Where Left,center right is the horizontal direction value, the corresponding hundred points for left=0%;center=50%;right=100% and top center bottom is the vertical direction of the value, wherein top=0%;center=50%; bottom=100%; If only one value is taken, the vertical direction value is not changed.

Transform-origin: (left,top); Transform-origin:right; Transform-origin (25%,75%);

It is also important to remind you that Transform-origin is not a property in transform, he has his own syntax, Transform-origin, like the other CSS3 attributes, we need to add the corresponding prefix to the different browse kernels. The following is a list of syntax rules for various browser cores:

Transform-origin writing rules under different browser cores//mozilla kernel browser: firefox3.5+  -moz-transform-origin:x y;  WebKit Kernel Browser: Safari and Chrome  -webkit-transform-origin:x y;  Opera  -o-transform-origin:x y;  IE9  -ms-transform-origin:x y;  Standard transform-origin:x y; Transform writing rules under different browser cores//mozilla kernel browser: firefox3.5+  -moz-transform:rotate | scale | skew | translate;  WebKit Kernel Browser: Safari and Chrome  -webkit-transform:rotate | scale | skew | translate;  Opera  -o-transform:rotate | scale | skew | translate;  IE9  -ms-transform:rotate | scale | skew | translate;  Standard Transform:rotate | Scale | Skew | Translate;

= =Transition= =

= =Animation= =

To be continued----