css3 common attributes collection

RGBA

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

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

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

text-shadow (no need to judge the browser)

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

The text-shadow is structured in the following order: 118, 160, .25);

is set to a negative value and the X-Offset shadow shifts to the left. Set Offset Y to a negative value - Shifts the shadow to the top. Colors can use RGBA values.

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

List of text-shadows (comma separated), 1px top and 1px bottom shadow.

Box-shadow box-shadow (need to determine the browser)

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

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

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

Similarly, multiple shadow styles can be defined, separated by commas.

moz-box-shadow:

-2px -2px 0 #fff,

2px 2px 0 #bb9595,

2px 4px 15px rgba(0, 0, 0, .3);

box-shadow The attribute has at most 6 parameter settings:

Shadow type: This parameter is an optional value. If no value is set, the default projection method is outer shadow; if the only value "inset" is taken, the outer shadow becomes Inner shadow, that is to say, when the shadow type is set to "inset", its projection is the inner shadow;

X-offset: refers to the horizontal offset of the shadow, its value can be positive or negative, if the value is If the value is positive, the shadow is on the right side of the object. On the contrary, if 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 or negative. If Positive value, the shadow is at the bottom of the object, otherwise when the value is negative, the shadow is at the top of the object;

Shadow blur radius: This parameter is optional, but its value can only be positive, if its value is When 0, it means that the shadow has no blur effect. The larger the value, the blurr the edge of the shadow;

Shadow expansion radius: This parameter is optional, and its value can be positive or negative. If the value is positive, the entire shadow will be extended. Expand, otherwise if the value is negative, then shrink

Shadow color: This parameter is optional. If no color is set, the browser will use the default color, but the default color of each browser is different, especially in the webkit kernel The safari and chrome browsers under will be colorless, that is, transparent. It is recommended not to omit this parameter.

Box border radius border-radius (need to determine the browser)

The abbreviation of border radius is similar to Padding and Margin properties (such as border radius: 20 pixels).

To render the border radius in the order of browsers, use "-WebKit-" in WebKit browsers and "-moz-" in Firefox. You can specify a different value for each corner.

border-radius:20px; Note that Firefox and Webkit Angular have different property names.

"Webkit's" writing method

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius: 25px;

-webkit-border-right-left-radius:45px;

"Firefox" writing method

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:25px;

-moz-border-radius-bottomright:45px;

The above is the collection of common css3 attributes. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!