Introduction to Common properties in CSS3

RGBA

Background:rgba (0, 118, 160,. 25);

The first three values are RGB color values, the last value is the horizontal transparency (0 = transparent, 1 = opaque).

RBGA can be applied to any color-related attributes such as font color, border color, background color, shadow color, etc.

Text Shadow Text-shadow (no need to judge browser)

text-shadow:2px 3px 2px #000;

The structure of the text shadow is in the following order: X-Offset, Y-offset, blur, and color;

text-shadow:-2px-3px 2px rgba (0, 118, 160,. 25);

Set to a negative value, and the X-offset shadow shifts to the left. Set to negative offset Y-shifts the top of the shadow. The color can be used in RGBA values.

text-shadow:0px 1px 0px #fff, 0px-1px 0px #000;

A list of text shadows (separated by commas), 1px top and bottom 1px shadows.

Box Shadow Box-shadow (need to judge browser)

The structure of the box shadow is the same as the shadow of the text: X-offset, y-offset, blur, and color.

-webkit-box-shadow:5px 5px 7px #333;-moz-box-shadow:5px 5px 7ix #333;

Similarly, you can define multiple shadow styles, separated by commas.

moz-box-shadow:-2px-2px 0 #fff, 2px 2px 0 #bb9595, 2px 4px 15px rgba (0, 0, 0,. 3);

The Box-shadow property has a maximum of 6 parameter settings:

Shadow type: This parameter is an optional value, and if no value is set, its default projection is an outer shadow, and if its unique value is "inset", the outer shadow becomes an inner shadow, that is, when the shadow type is "inset", its projection is the inner shadow;

X-offset: Refers to the shadow horizontal offset whose value can be positive or negative, if the value is positive, the shadow is on the right side of the object, and the 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 can also be positive negative, if it is 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 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 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 expands, the inverse value is negative, then shrinks

Shadow color: This parameter is optional, if you do not set any color, the browser will take the default color, but the browser default color is different, especially in the WebKit kernel of safari and chrome will be colorless, that is, transparent, it is recommended not to omit this parameter.

Box boundary radius Border-radius (need to judge browser)

Shorthand for the boundary radius, which is similar to the padding and margin properties (such as the boundary radius: 20 pixels).

In the browser order to render the boundary radius, in the WebKit browser with "-webkit-", Firefox with "-moz-".

border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;

You can specify a different value for each corner. Note that the corners of Firefox and WebKit have different property names.

The wording of "WebKit"

-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-left-radius:25px ;-webkit-border-right-left-radius:45px;

The wording of "Firefox"

-moz-border-radius-topleft:5px;-moz-border-radius-topright:15px;-moz-border-radius-bottomleft:25px;- moz-border-radius-bottomright:45px;