CSS3 basic element overview, CSS3 element Overview

CSS3 basic element overview, CSS3 element Overview

This article will introduce several new CSS attributes (text-shadow, box-shadow, and border-radius. These CSS3 attributes are usually used to enhance the page layout.
RGBA
The first three values are RGB color values, and the last value is the transparency level (0 = transparent, 1 = opaque ).
RGBA can be applied to any color attributes, such as font color, border color, background color, and shadow color.
Text Shadow
The structure sequence of text shadows is: x axis offset, y axis offset, blur, and color.
Sets an x-axis offset of a negative value to move the shadow to the left. Set a negative y axis offset to move the shadow to the top. Don't forget, you can apply the RGBA value in the shadow color.
You can also specify a text shadow list (separated by commas ). The following example uses two text shadow statements to create a convex text effect (1px at the top and 1px at the bottom ).
Text-shadow: 0 1px 0 # fff, 0-1px 0 #000;

Border Radius
The boder radius is written like the padding and margin attributes (for example, border-radius: 20px ). To make the browser render the border radius attribute, you must add a prefix to the attribute name. The Webkit engine browser is "-webkit-", and Firefox is "-moz -".
You can specify different values for each corner. Note: The Edge attribute names of Firefox and Webkit are different. (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)

Box Shadow
The structure of the box shadow is the same as that of text-shadow, x axis offset, y axis offset, fuzzy, and color.
Similarly, you can set more than one box shadow. The following is an example of three box shadow statements.
-Moz-box-shadow:-2px-2px 0 # fff, 2px 2px 0 # bb9595, 2px 4px 15px rgba (0, 0, 0,. 3 );