CSS 3 Basics

This article describes the CSS 3 part of the new property base, including Rgba, Text-shadow, Box-shadow, Border-radius. These properties are often used to enhance the layout and reputation of the page. (Translator: Click to view demos in browsers that support CSS3 such as Firefox, Safari, IE9, etc.). )

RGBa

The first three values are RGB values, and the last value is the decimal alpha opacity value (0= transparent, 1 = opaque)

CSS 3 Rgba to achieve semi-transparent background

RBGA can be used for any more color-related properties, such as font color, border color, background color, shadow color, and so on.

RGBA can be applied to all color properties

(Translator Note: The difference between RGBA and opacity is that opacity in addition to the background to be effective, the application of its element content will inherit it, also said that the content will be as transparent as the background, RGBA is to solve the problem of the design. )

TEXT SHADOW

The Text shadow is composed of the following order: X-offset, Y-offset, Blur, and color, i.e. vertical offset, horizontal offset, projection width (blur radius), and color.

CSS 3 Text-shadow attribute detailed

If you apply a negative value to the horizontal offset (x-offset), the shadow appears to the right of the element, and if you apply a negative value to the vertical offset (y-offset), the shadow appears at the top of the element, and you can use RGBA on the shadow color. The larger the value of the blur radius, the more blurred the shadow is, set to 0 o'clock, and the shadows are clearest.

Use RGBA on Text-shadow colors

You can also specify a series of Text-shadow values (separated by commas), and the following example uses two Text-shadow to achieve a text bump (up and down 1px).

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

Text-shadow Text Bump Effect

BORDER RADIUS

The shorthand for border radius (rounded) is similar to the padding and margin properties (for example, border-radius:20px), in order for the browser to recognize fillet properties, you need to add a specific prefix, such as "-webkit-" for WebKit browsers, "- moz-"for Firefox.

CSS 3 Rounded Corners

Each corner can specify a different width, note the difference between WebKit and Firefox when each corner is written separately.

CSS 3 Rounded Corners

BOX SHADOW

The Box-shadow property structure is similar to the Text-shadow: X-offset, Y-offset, Blur, and color.

Box-shadow attribute Detailed

As with Text-shadow, multiple sets of values can be set, and the following example is a three-group Box-shadow declaration:

-moz-box-shadow:{

-2px-2px 0 #fff,

2px 2px 0 #bb9595,

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

}

CSS 3 Box-shadow