CSS3 Instance Tutorial: CSS3 drop-down Menu Code Resolution

Last week I posted a CSS3 pull-down menu, and someone reflected that I didn't explain the CSS code in detail enough. So, this article will explain the new CSS properties, including: Text-shadow,box-shadow and Border-radius. These CSS3 properties are the most commonly used, and they are correct to know.

RGBA

The first three values are RGB color values, and the last value indicates the degree of transparency (0 represents full transparency and 1 is completely opaque).

RGBA can be applied to properties of any design color, such as text color, border color, background color, shadow color, and so on.

Text Shadow

Text shadows are organized in the following order: X-offset,y-offset,blur,color;

Setting the X-offset to a negative value moves the shadow to the left. Setting the Y-offset to a negative value moves the shadow to the top. Don't forget you can also apply the RGBA value to the shadow color.

You can also apply a series of text shadows (separated by commas) to the text. The following example uses two text shadow declarations to create text embedding effects (1 pixels at the top and 1 pixels at the bottom).

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

Border radius (Translator note: Rounded corners effect)

The border radius is abbreviated in the same way as the inner margin and the outer margin (for example: border-radius:20px;). In order to enable the browser to render the border radius, the browser that webkit the kernel needs to add "-webkit" to the Firefox browser and add "-moz-" to it.

You can apply a different value to each corner. Note that the WebKit browser and Firefox are different in the name of the corner.

Box Model Shadow

The order of the attributes of the box model Shadow is similar to the order of the text shadow attributes: X-offset,y-offset,blur and color.

As before, you can apply multiple box shadows. The following example is a three-box shaded declaration list.

-moz-box-shadow:

-2px-2px 0 #fff,

2px 2px 0 #bb9595,

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