CSS3 study notes, at any time to help you remember the forgotten CSS3

One, CSS3 basic situation Introduction.
As the name implies, CSS3 is an upgraded version of CSS2, which has a lot more powerful features than the previous version. Currently Chrome,safari,firefox
Opera,ie10 later began to support the CSS3 effect.

1. Specific additions to the powerful features introduced.
. selector: We used to use Class,id,tagname as a selector for HTML elements. CSS3 's selector is more powerful and he can reduce
The number of Class,id in the label, the more convenient maintenance style sheet, better realize the separation of structure and performance.
. Fillet effect: Border-radius.
. Block shadows and text shadows: You can add a projection effect to any div and text.
. Color: CSS3 supports more colors and a wider range of color definitions. The new color CSS3 supports Hsl,cmyk,hsla,rgba.
. Gradient effect: You can only use PS to make this effect.
. Personalize fonts: @font-face, easily implement custom fonts.
Multi-background Image: Add multiple backgrounds to an element.
. Border background: This is my own experience.
. Warp Processing: You can rotate, scale, and move HTML elements. And some previously can only use JS to achieve the effect.
. Multi-Column layout: similar to newspaper structure. Multiple div is required, the browser interprets this property and creates a multi-column structure.
. Media queries: Apply different styles for different screen resolutions.

2. Fillet specific use: Border-radius: Left upper right upper right lower left bottom;
3. Border, Shadow:
Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];
Inset in the end will make the shadow an inner shadow. Can only be put in the last. You can add multiple shadows, just by separating them with commas.
The so-called offset: you want the shadow to be in that side.
4.rgba (color,color,color, transparency);
5.linear-gradient (direction, start color, transition color (multiple), end color).
Selected direction: to (left right bottom top top left top right)
6.text-overflow:clip (direct cut) |ellipsis (into ellipsis);
Word-wrap:normol (Control continuous text wrapping) | | Break-word;
[email protected] can load the server side of the font file, so that the browser can display the user's computer does not have installed fonts.
@font-face {
font-family: Font name;
SRC: The relative or absolute path of the font file on the server;
}
p {
font-size:12px;
font-family: "My Font";
/* must item, set font-family same value in @font-face */
}
8.text-shadow can be used to set the shadow effect of text.
Text-shadow:x-offset y-offset blur color;
X-offset: Represents the horizontal offset distance of the shadow, whose value is positive when the shadow is offset to the right, and vice versa;

Y-offset: Refers to the vertical offset distance of the shadow, and if its value is positive, the shadow is shifted downward and the inverse is offset upward;

Blur: Refers to the degree of blur of the shadow, its value cannot be negative, if the higher the value, the more blurred the shadow, the clearer the shadow, if you do not need shadow blur can set the Blur value to 0;

Color: Refers to the colors of the shadow, which can use the RGBA color.
9.background-origin:border-box | Padding-box | Content-box;
The parameters indicate whether the background picture is from the border, the padding (the default), or the content area to begin displaying.
10. Used to tailor the background image to fit the actual needs.
Background-clip:border-box | Padding-box | Content-box | No-clip
The arguments are either from the border, or inside the fill, or the content area to crop the background outward.
No-clip means no cropping, and the parameter Border-box shows the same effect. The Backgroud-clip default value is Border-box.
11.background-size sets the size of the background picture, displayed as a length value or as a percentage, and you can stretch the picture by cover and contain.
Background-size:auto | < length value > | < percent > | Cover | contain;
1, Auto: Default value, do not change the original height and width of the background picture;

2, < length value;: paired appearance such as 200px 50px, the background image width is set to the first two values, when setting a value, it as the width of the picture as a value to zoom;

3, < percent >:0%~100% any value between the width of the background image is set to the height of the element is the value of the previous percentage, when a value is set as above;

4, cover: As the name implies for coverage, the background image is more than scaling to fill the entire container;

5, contain: accommodate, will be the background picture, etc. than zoom to one side of the edge of the container.
12.multiple backgrounds;
Multiple backgrounds, that is, the attributes of the background in CSS2 plus the multiple overlays of the new background of origin, clip, and size,
Abbreviations are separated by commas for each set of values; When you use decomposition, if you have more than one background picture, and the other attributes are only a single (for example, Background-repeat has only one),
Indicates that the property value is applied to all background pictures.
Background: [Background-color] | [Background-image] | [Background-position] [/background-size] |
[Background-repeat] | [Background-attachment] | [Background-clip] | [Background-origin],...
Background:url (http://static.mukewang.com/static/img/logo_index.png) no-repeat left top/150px 40px,
URL (http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/200px 20px;
13. Three kinds of selectors: E (att^$*= "Val"); E for label, ^ for start match, $ for end match, * for arbitrary match.
The 14.:root selector, literally, we can clearly understand is the root selector, which means the root element of the document that matches the element E. In an HTML document, the root element is always 15.:not selector, except this one does not have this style.
The 16::empty selector represents null. Used to select elements without any content, nothing here refers to a little bit of content, even if it is a space.
The 17::target selector is called the target selector, which is used to match the target element of a marker for a document (page) URL. Let's start with the last example and then do the analysis.
: the ": First-child" selector represents the element e that selects the first child element of the parent element. The simple point of understanding is to select the first child element in the element, remembering that it is a child element, not a descendant element.
19.::before and:: After these two are used primarily to insert content in front or behind elements, these two are used in conjunction with "content", and the most used is to clear the float.

. Clearfix::before,
. clearfix::after {
Content: ".";
Display:block;
height:0;
Visibility:hidden;
}
. clearfix:after {Clear:both;}
. clearfix {zoom:1;}
exm:<! DOCTYPE html>

<meta charset=utf-8/>

<title>before, after</title>

<style>

. Box h3{
Text-align:center;
position:relative;
top:80px;
}
. box {
width:70%;
height:200px;
Background: #FFF;
margin:40px Auto;
}

. effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;
}
. Effect::before,. effect::after{
Content: "";
Position:absolute;
Z-index:-1;
-webkit-box-shadow:0 0 20px Rgba (0,0,0,0.8);
-moz-box-shadow:0 0 20px Rgba (0,0,0,0.8);
box-shadow:0 0 20px Rgba (0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
}
</style>
<body>
<div class= "box effect" >
</div>
</body>
20.rotate (angle). Deflection. Clockwise when the angle is positive, or counterclockwise when negative. Specific wording: transfrom:rotate ();
21.skew (x, y) or only one parameter, i.e. one-way deflection.
22.scale (x, y); zoom. <1 Zoom Out, >1 zoom in.
23.translate (x, y); Move the Div.
24.matrix (A,B,C,D,E,F);
A is the horizontal scaling amount of the element, 1 is the original size;
B is longitudinal twist, 0 is unchanged;
C for transverse distortion, 0 unchanged;
D is the vertical scaling amount, 1 is the original size;
E is the horizontal offset, 0 is the initial position;
F is the vertical offset, 0 is the initial position;
25.transition-property: triggered by clicking on the mouse, getting focus, being clicked or any changes to the element, and smoothing the CSS property values with an animated effect.
26.transition-duration: This is the speed of control.
The 27.transition-timing-function property refers to the "easing function" of the transition. It is used primarily to specify the transition speed of the browser and the progress of the operation during the transition, including
Ease (from fast to slow); Lineari (constant speed); Ease-in (acceleration), ease-out (deceleration), ease-in-out (first plus minus);
The 28.transition-delay property is very similar to the Transition-duration property, and the difference is that transition-duration is used to set the duration of the transition animation, Transition-delay is used primarily to specify the time at which an animation starts executing, that is, how long it takes to start executing after changing the attribute value of the element.
29.Keyframes is called a keyframe, similar to a keyframe in Flash. In CSS3 it begins with "@keyframes", followed by the animated name plus a pair of curly braces "{...}", in parentheses, which are the different time-period style rules.
30.animation-delay: Controls the start time of playback.
40.animation-iteration-count: Sets the number of plays. If the value is infinite, the animation will play for an unlimited number of times.
The 41.animation-direction property is primarily used to set the direction in which the animation is played. 1. Normal is the default value, and if set to normal, each cycle of the animation is played forward; the other value is alternate, and his role is, The animation plays forward in an even number of times, and the odd number of times plays in the opposite direction.
The 42.animation-play-state property is primarily used to control the playback state of an element animation.
The 43.animation-fill-mode property defines the action that occurs before and after the animation begins.
None

The default value, which indicates that the animation will proceed as expected and end, and the animation will be reversed to the initial frame when the animation finishes its last frame

Forwards

Represents the position at which the animation continues to apply the last keyframe after it finishes

Backwards

The initial frame of the animation is applied quickly when an animation style is applied to the element

Both

Element animations have both forwards and backwards effects
44.columns: Multi-column layout. columns:200px 2, respectively, represents the column width, the number of columns.
45.column-width:column-count: One is a column width and one is the number of columns.
46.CSS3 column spacing Column-gap; (available units Px,em)
47.column-rule is primarily used to define the border width, border style, and border color between columns. Simply put, it's a bit like the usual border property. However, Column-rule does not occupy any spatial position, and changing its width between columns and columns does not change the position of any columns.
50.box-sizing:content-box (computing method of the Internet) Border-box (calculation method of IE) inherit (the calculation method of the parent)
51.1. Max width max-width

"Max-width" is the most commonly used feature in media features, meaning that the style takes effect when the media type is less than or equal to the specified width. Such as:

@media screen and (max-width:480px) {
. ads {
Display:none;
}
}
52. Free Scaling Properties Resize Resize:none | both | Horizontal | Vertical | Inherit
53.outline (similar to border, except that it does not occupy the layout space, and the shape is not necessarily a rectangle.) )
Outline: [Outline-color] | | [Outline-style] | | [Outline-width] | | [Outline-offset] | | Inherit
54.h1:before {
Content: "I was plugged in";
color:red;
}
The 55.none definition does not convert. Test
Matrix (n,n,n,n,n,n) defines a 2D conversion, using a six-value matrices. Test
Matrix3D (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) defines a 3D conversion, using a 4x4 matrix of 16 values.
Translate (x, y) defines the 2D conversion. Test
Translate3d (x, y, z) defines 3D transformations.
TranslateX (x) defines the conversion, just with the value of the x-axis. Test
Translatey (y) defines the conversion, just with the value of the y-axis. Test
Translatez (z) defines the 3D conversion, just using the z-axis value.
Scale (x, y) defines the 2D scaling transformation. Test
Scale3d (x, y, z) defines a 3D scaling transformation.
ScaleX (x) defines the zoom transformation by setting the value of the x-axis. Test
ScaleY (y) defines the zoom transformation by setting the value of the y-axis. Test
Scalez (z) defines the 3D scaling transformation by setting the value of the z-axis.
Rotate (angle) defines the 2D rotation, which specifies the angle in the parameter. Test
Rotate3d (x,y,z,angle) defines 3D rotation.
Rotatex (angle) defines a 3D rotation along the X-axis. Test
Rotatey (angle) defines a 3D rotation along the Y-axis. Test
Rotatez (angle) defines a 3D rotation along the Z-axis. Test
Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes. Test
SKEWX (angle) defines a 2D tilt transition along the X-axis. Test
Skewy (angle) defines a 2D tilt transition along the Y-axis. Test
Perspective (N) defines a perspective view for 3D transformation elements. Test

CSS3 study notes, at any time to help you remember the forgotten CSS3