CSS3 (continuous update ...)

1, browser support: Chrome, Safari, Firefox, Opera, 360, IE10 later. 2. Browser prefix:-webkit (Chrome and Safari)-moz (Firefox)-ms (IE)-O (opera)3. Rounded angle effect border-radius:5px 4px 3px 2px;/* Four RADIUS values are upper-left, upper-right, lower-right, and lower-left corner, clockwise */4. Shadow effect Box-shadowBox-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode]; If you add multiple shadows, just separate them with commas: box_shadow{
box-shadow:4px 2px 6px #f00, -4px-2px 6px #000, 0px 0px 12px 5px #33CC00 inset;} the difference between shadow blur radius and shadow expansion radius

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

Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

The x-axis offset and y-axis offset values can be set to a negative number5, for the border application picture Border-image Round Parameters : Round can be understood as a complete paving. Compressed (or stretched) to achieve completeness;#border-image {

width:170px;

height:170px;

border:70px solid;

Border-image:url (borderimg.png) round;

 }

Stretch is very good to understand is stretching, how long pull how long. How far "roll" is.

Border-image:url (borderimg.png) stretch

6, RGB is a color standard, is the red (R), Green (G), Blue (B) changes and overlapping each other to get a variety of colors. Rgba adds a parameter that controls Alpha Transparency on the basis of RGB.

Grammar:

Color:rgba (R,g,b,a)

Above R, G, b three parameters, the positive integer value range is: 0-255. The value of the percentage value range is: 0%-100%. Values that are out of range will be up to their nearest value limit. Not all browsers support the use of percent values. A is a transparency parameter, and the value is between 0~1 and not negative.7. Gradient ColorLinear gradient:8, Text-overflow and Word-wrap Text-overflowUsed to set whether to use a Omit Tag（... ) indicates an overflow of text within the object.

Text-overflow is only used to illustrate how the text overflows when displayed, to achieve the effect of ellipsis when overflow, but also to define the force of the text in a row (White-space:nowrap) and overflow content is hidden (Overflow:hidden), the only way to achieve overflow text display ellipsis effect, the code is as follows:

While Word-wrapcan also be used to set text BehaviorWhether to break a career change when the current row exceeds the bounds of the specified container.9. Embed Font @font-face

@font-face is able to load the server-side font file, allowing the browser to display fonts that are not installed on the user's computer.

Grammar:

@font-face {    font-family: font name;    SRC: The relative or absolute path of the font file on the server;}

After this is set, you can use the same font as normal (font-*)To set the font style.10. Text Shadow Text-shadow

Text-shadow can be used to set the shadow effect of text.

Grammar:

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.11, Background-origin

Sets the original starting position of the element's background picture.

Grammar:

Background-origin:border-box | Padding-box | Content-box;

The parameters indicate that the background picture is from BorderStill is Padding (default), or is Content AreaStart displaying.12, Background-alip

Used to tailor the background image to fit the actual needs.

Grammar:

Background-clip:border-box | Padding-box | Content-box | No-clip

parameters, respectively, represent the borders,Or Inner paddingOr Content AreaCrop the background outward. No-clipmeans no trimming, and parameter Border-boxShow the same effect. backgroud-clipThe default value is Border-box。13, 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 front two values, when set a value, it as the width of the picture as a value to zoom ;

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

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

5, contain: Accommodates, will be background picture etc than Zoom to one side clings to the edge of the container。14, multiple backgrounds

Multiple backgrounds, that is, the attributes of the background in CSS2, plus multiple overlays of the new background of origin,clip , and size , abbreviated as each set of values separated by commas; When you use decomposition, if you have more than one background picture, and the other property has only a single (for example, Background-repeat only one), it indicates that the property value is applied to all background pictures.

The syntax is abbreviated as follows:

Background: [Background-color] | [Background-image] | [Background-position] [/background-size] | [Background-repeat] | [Background-attachment] | [Background-clip] | [Background-origin],..15. Attribute Selector3 new property selectors have been added so that the property selector has a wildcard charactersThe concept.16. Structural pseudo-class selector--root :rootSelectors, literally we can clearly understand is the root selector, he means to match the element E is located in the document root element. In an HTML document, the root element is always :notSelectors are called Negative Selector, and in jquery: The not selector is exactly the same, You can select all elements except an element。 Structural pseudo-Class selectors the--empty: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. Structural pseudo-Class selector--target :targetThe selector is called the target selector and is used to match the document (page) the target element of a marker for a URL。 Our structural pseudo-class selector--first-chirld ": First-child" selector represents the Select the element of the first child element of the parent element e。 The simple point of understanding is to select the first child element in the element, and remember that it is child elements, not a descendant element. Structural pseudo-Class selector--last-chirld

The ": Last-child" selector acts like the ": First-child" selector, unlike the ": Last-child" selector that selects the last child element of the element. For example, if you need to change the background color of the last "Li" in the list, you can use this selector,

ul>li:last-child{background:blue;}Structural pseudo-Class selector--nth-child (n) ": Nth-child (N)" Selectors are used to locate a Parent ElementOf one or more specific child elements。 where "n" is its argument and can be an integer value (1,2,3,4), it can be an expression (2n+1,-n+5), and a keyword (odd, even), but the starting value of parameter n is always 1, not 0. That is, the value of the parameter n is 0 o'clock, and the selector will not select any matching elements.

experience and skill: when n is an expression in the ": Nth-child (N)" selector, where n is calculated starting from 0, no matching element is selected when the expression has a value of 0 or less than 0. As shown in the following table:

Structural pseudo-Class selectors--nth-last-child (n) ": Nth-last-child (N)" selectors and the preceding ": Nth-child (N)" selectors are very similar, but here is a "last", The Role and ": Nth-child (n) "selectors are different, starting with the last child element of a parent element to select a specific element.17. First-of-type Selector": First-of-type" selector similar to ": First-child" selector, the difference is Specifies the type of the element, which is used primarily to locate the first child element of a type under a parent element.18, Nth-of-type (n) Selector“ :nth-of-type(n)"Selector and" :nth-child(n)The selector is very similar, except that it calculates only the child elements of one of the types specified in the parent element. When a child element in an element is not just a child of the same type, it is convenient and useful to use the ": Nth-of-type (N)" selector to locate a child element of some type in the parent element. In the ": Nth-of-type (N)" selector, the "n" parameter in the "N" and ": Nth-child (N)" Selectors is also the same, which can be specific integer, or it can be An expression, it can also be Key Words。19. Last-of-type Selector“ :last-of-type"Selector and" :first-of-typeThe selector function is the same, and the difference is that he chooses a type that is under the parent element 最后一个子元素。20, Nth-last-of-type (n) Selector“ :nth-last-of-type(n)"Selector and" :nth-of-type(n)"Selector is the same as selecting a SEED element type specified in the parent element, but it starts from the last child element, and it is used in a way similar to the one described in the previous section. :nth-last-child(n)"Selector.21. Only-child Selector“ :only-childThe selector selects only one child element in the parent element, and only one child element. That is, there is only one child element in the parent element of the matching element, and it is a the only child element。22. Only-of-type Selector “:only-of-type”The selector is used to select an element that is the only child of its parent element of the same type. This may not be a good idea, in other words. “:only-of-type”is to represent an element he has many child elements, and only one of them is unique, and the ": Only-of-type" selector allows you to select only one type child element in the element.23.: Enabled SelectorIn a form on the web, some table cells are known to be available ( ": Enabled") and not available (" :d isabled") status, such as input box, password box, check box, and so on. By default, these form elements are in the available state. Then we can pass the pseudo selector " : Enabled"Sets the style for these form elements. :d isabled selector: checked::selection selector " :: Selection"Pseudo-elements are used to match HighlightText (text when you select text with the mouse). : Read-only Selector " : Read-onlyThe pseudo-class selector is used to specify a style that is in a read-only state element. The simple point of understanding is that the element is set in the " readonly= ' readonly '": Read-write selector" : Read-writeThe selector is just the same as the : Read-onlyThe selector instead, which is used primarily to specify when an element is non-read-only statusThe style of the time. :: Before and:: After::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 common scenario is to clear floats.24, deformation--rotary rotate () rotate rotate () functionRotates the element relative to the origin by specifying the angle parameter. It operates mainly in two-dimensional space, setting an angle value to specify the amplitude of the rotation. If this value is Positive Value, Element relative Origin Center Clockwiserotation; If this value is Negative Value, Element relative Origin Center Counter-clockwiseRotating. 1, using Css3grid layout, we only need to write this:body{columns:3;column-gap:0.5in;} IMG{FLOAT:PAGETOPRIGHT;WIDTH:3GR;} CSS3 more normalized, the body part of the Declaration page is 3 columns, the column spacing is 0.5 inches; the Float property in IMG indicates that the picture floats in the upper-right corner of the page and has a width of 3 column widths. This complex layout can be achieved with just two lines of CSS.2, Flexbox (Telescopic layout box)Flexbox by Telescopic ContainerAnd Telescopic ProjectComposition A telescopic container can be obtained by setting the display property of the element for flex or Inline-flex. A container set to Flex is rendered as a block-level element, while a container set to Inline-flex is rendered as a inline element. Flexbox usually allows us to better manipulate the layout of his child elements, for example:

1. 1. If the element container does not have enough space, we can set them on the same line without having to calculate the width of each element;
   2. Can quickly get them laid out in one column;
   3. They can be conveniently aligned to the left, right, middle, etc. of the container;
   4. You can change their display order without modifying the structure;
   5. If the element container sets a percentage and the window size changes, you do not have to worry about breaking the layout because the exact width of the element is not specified, because each child element in the container can automatically allocate the scale of the container's width or height.

3. CSS3 MakerThe tool is very powerful and can be used to demonstrate a lot of effects such as gradients, shadows, rotations, animations, etc., and generate code for the corresponding effects, CSS3 generator is a great variety of CSS3 code generators that support many features such as fillets, gradients, rotations, and shadows, with a preview effect. CSS3A handsome and cool CSS3 tool that allows you to instantly modify code and preview effects online, as well as detailed browser compatibility.

CSS3 (continuous update ...)