A collection of commonly used css3 attributes

The following are the css3 commonly used in daily development.

Note for using css3: Some css3 is also implemented in some browsers such as Firefox Chrome in the early days. Therefore, to be compatible with Some browsers, you need to write them in css3 as follows:

{-Moz-border-radius: 4px;-WebKit-border-radius: 4px; border-radius: 4px ;}

{Moz kernel browser, WebKit kernel browser, ie9}

 

Border-radius: (rounded corner)

Border-radius Syntax: border-radius: None | <length> {} [/<length> {}]?"/" Indicates the horizontal radius of the rounded corner, and "/" indicates the vertical half of the rounded corner.

1. Border-radius: 10px; when it has only one value, it represents four corners,

2. Border-radius: 20px 5px 20px 5px; when it gets four values, we may be able to change to the following more intuitive CSSCode:

 
Border-top-left-radius: 20px; border-top-right-radius: 5px; border-bottom-right-radius: 20px; border-bottom-left-radius: 5px;
 

Its sequential positions are in the upper left corner-> upper right corner-> lower left corner, as shown below:

3. Border-radius: 20px 5px; border-radius: 20px 5px 40px;

[The first item means the same as Example 2. Take two values, that is, 20px in the upper left and lower right corner, and 5px in the upper right and lower left corner.]

[Meaning of the second item. When the value is three, the upper-left corner is 20px, the upper-right corner is 5px, the lower-right corner is 40px, and the lower-left corner is 5px.] As follows:

 

4. Border-radius: 20px 5px/30px 30px;

The first two values are horizontal and the last two values are vertical. They correspond to the preceding values, left and right.

Rgba :( R + G + B + alpha)

Syntax format: rgba (, 0 );

They correspond to colors, saturation, brightness, and transparency respectively.

Application: font shadow.

 

Text-Shadow: (Text shadow)

Syntax format: [color X axis (x offset) Y axis (y offset) blur radius (blur)], [color X axis (x offset) Y axis (y offset) blur radius (blur)].

A font image without text-shaodw effect, as shown below:

From the syntax format, we can see that the color is first taken, then the X axis, Y axis, and blur radius. X axis: the distance from the shadow horizontal offset, positive to right to left. Y axis: the distance from the vertical shadow offset. It is positive, negative, and upward. The Blur radius indicates the degree of blur. Negative values are not allowed. The greater the value, the blurrier the shadow, and The clearer the shadow.

1. Text-Shadow: #333 0 3px 2px;

2. Text-Shadow: You can also use multiple shadows on a set of fonts. Use commas (,) to separate them.

Box-shaodw (layer shadow)

Syntax format: Box-Shadow: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color [up to six values can be obtained]

Note:

Projection Method: either internal or external. Inset [inner], not selected [inner]

X axis: the direction of the horizontal offset, positive to right to left.

Y axis: the vertical offset direction. It is positive, negative, and upward.

Shadow blur radius: only positive values are allowed. The greater the shadow, the blurrier the radius.

Radius of shadow expansion: positive expansion and negative reduction.

Shadow color: color.

1. Box-Shadow: Inset 0px 0px 10px 10px #936;

2. Box-Shadow: 0px 0px 10px 10px #936;

3. Box-Shadow: Inset 10px 10px 10px-10px #936;