CSS3 Knowledge Point Finishing (i)----basic style

A

Different browsers may require different prefixes when writing CSS3 styles. It indicates that the CSS property or rule has not yet become part of the World Wide Web Standard, is the browser's private property, although the newer version of the browser does not need a prefix, but in order to better forward compatibility prefix is not necessary.

Prefix	Browser
-webkit	Chrome and Safari
-moz	Firefox
-ms	Ie
-O	Opera

(ii) border

1) Rounded angle effect Border-radius

border-radius:10px; /* All corners use rounded corners with a radius of 10px */

border-radius:5px 4px 3px 2px; /* Four RADIUS values are upper-left, upper-right, lower-right, and lower-left corner, clockwise */

The value of Border-radius can be used not only in PX units, but also in percentages or EM, but compatibility is not very good at the moment.

Solid Upper semicircle:

Method: The height is set to half the width and the radius of the upper-left and upper-right corner is the same as the height of the element (greater than is also possible).

div{    height:50px;/* is half the width of */    width:100px;     background: #9da;     border-radius:50px 50px 0 0;/* radius set at least the value of height */     }

Solid Circle:
Method: Set width and height values to be consistent (that is, squares), and four fillet values are set to half of their values. The following code:

div{    height:100px;/* and Width set consistent */    width:100px;    Background: #9da;    border-radius:50px;/* four rounded values are set to half the width or height of the value */    }

2) Shadow Border-shadow

Box-shadow is to add a shadow to the box. Support for adding one or more.

Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];

Value	Describe
X-axis Offset	Necessary. The position of the horizontal shadow, allowing negative values
Y-Axis Offset	Necessary. Position of vertical shadow, allowable negative value
Shadow Blur Radius	Optional. Blur Distance
Shadow expansion radius	Optional. The size of the shadow
Shadow color	Optional. Omit default to Black
Projection mode	Optional. Internal shadow mode when setting inset, if omitted as outer shadow

Note: Inset can be written on the first or last of the parameters, and other positions are invalid.

To set an outer shadow for an element:

Example code:

. box_shadow{  box-shadow:4px 2px 6px #333333;}

Effect:

To set an inner shadow for an element:

Example code:

. box_shadow{  box-shadow:4px 2px 6px #333333 inset;}

Effect:

Add multiple shadows: Just separate them with commas. Such as:

. box_shadow{    box-shadow:4px 2px 6px #f00, -4px-2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

Effect:

1. 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;

3) Border Shadow picture Border-image

#border-image{   background: #F4FFFA;   width:210px; height:210px; border:70px solid #ddd;   Border-image:url (borderimg.png) Repeat  }

Three optional parameters: round (tiled) repeat (repeat) stretch (extrude)

(c) Color-related

1) RGB is a color standard that is composed of red (R), Green (G), Blue (B) and superimposed to obtain a variety of colors. Rgba adds a parameter that controls alpha transparency on the basis of RGB.

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.

Grammar:

Background-color: Rgba (100,120,60,0.5);

The compatibility mode is:

Background-color:rgb (100,120,60); Alpha:0.5;filter:alpha (OPACITY=50);

2) Gradient Color

Note is: background-image, do not write Background-color

Linear-gradient ([Set direction],[set start color],[set various over color],[set End color])

Parameters:

First parameter: Specifies the gradient direction, which can be expressed by the keyword "angle" or "English":

Angle from 0deg to 360deg indicates vector direction (starting clockwise)

From bottom right to upper left corner to top ieft = 315deg

When the first parameter is omitted, the default is "180deg", which is equivalent to "to bottom".

The second and third parameters, which represent the starting and ending points of the color, can have multiple color values.

Background-image:linear-gradient (to left, red, orange,yellow,green,blue,indigo,violet);

：

(d) Text and fonts

1) Text-overflow used to set whether to use an ellipsis tag (... ) indicates an overflow of text within the object.

However, Text-overflow is only used to illustrate how the text overflows when displayed, to achieve the effect of ellipsis when overflow,

Also define mandatory text to be displayed on one line (white-space:nowrap) and overflow content as hidden (Overflow:hidden),

This is the only way to achieve an overflow text display ellipsis effect, the code is as follows:

At the same time, word-wrap can also be used to set the text behavior if the current line exceeds the bounds of the specified container.

Normal is the browser default, Break-word set to wrap within a long word or URL address, this property is not commonly used, with the browser default value.

2) @font-face can load the server-side font files, allowing the browser to display fonts that are not installed on the user's computer

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

Once this is set, you can set the font style in (font-*) as you would with normal fonts. Such as:

p {    font-size:12px;    font-family: "My Font";    /* must item, set font-family same value in @font-face */}

3) 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.

text-shadow:0 1px 1px #fff

(v) Background-related styles

1) Background-origin set the original starting position of the element background picture

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.

It is important to note that if the background is not no-repeat, this property is not valid, it will be displayed starting from the border.

2) Background-clip is 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. backgroud-clipThe default value is Border-box.

3) Background-size Set the size of the background picture, displayed as a length or percentage, and you can stretch the picture by cover and contain.

< Length Value > < percentage > | Cover | Contain

Value Description:

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.

4) Multiple Background 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, and if you have multiple background images when you use the decomposition notation,

Other properties have only one (for example, Background-repeat only one), which 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],...

Attention:

1. Separate the abbreviated values of each group of background with commas;
2. If there is a size value, it needs to be followed by position and separated by "/";
3. 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 all background pictures apply the property value.
4. Background-color can only set one.

CSS3 Knowledge Point Finishing (i)----basic style