CSS Properties: Text

This article will make a basic introduction to several new CSS attributes (Text-shadow,box-shadow,and border-radius). These CSS3 properties are often used to strengthen the page layout.

RGBA

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

RGBA can be applied to any property with a color, such as font color, border color, background color, shadow color, and so on.

Text Shadow

The structure order of the text Shadows is: X-axis offset, y-axis offset, blur, color.

Set a negative x-axis offset to transfer the shadow to the left. Sets a negative y-axis offset to shift the shadow to the top. Don't forget, you can apply the RGBA value in the shadow color.

You can also specify a list of text shadows (separated by commas). The following example uses two text shadow declarations to make a text letterpress effect (top 1px and bottom 1px).

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

Border Radius

The boundary radius (border radius) is written similar to the internal margin (padding) and margin (margin) attributes (for example, border-radius:20px). In order for the browser to render the boundary RADIUS attribute, you need to prefix the property name, the browser for the Webkit engine is "-webkit-", and Firefox is "-moz-".

You can specify a different value for each corner. Note: The name of the corner attribute for Firefox and Webkit is not the same.

Box Shadow

Box shadow structure and Text-shadow the same, x-axis offset, y-axis offset, blur, color.

Again, you can set more than one box shadow. The following is an example of three box shadow sounds.

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

English manuscript: Thebasics of CSS3 Webdesignwall