CSS3 Implementing a Shadow effect instance

CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity. The previous specification was too large and complex to be a module, so it was broken down into smaller modules, and more new modules were added. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effect, multi-column layout, etc. In this chapter we will tell you a simple example of a CSS3 shadow effect. A new feature is the use of the Shadow property of CSS3 to add a shadow effect to the elements of a webpage. However, this feature only works on browsers that support CSS3, such as Firefox3.5,safari 3.1 +, and Google Chrome.

Here's how to use the Shadow property of CSS3.

The CSS3 shadow mainly uses the Box-shadow property, which has the following syntax:

Box-shadow:

The values for each of these attributes are as follows:

Horizontal (Horizontal): Specifies the horizontal offset shadow. A positive value (that is: 5px) shadows to the right, and a negative value (that is,-10px) will make it biased to the left.
Vertical (vertical): Specifies the vertical offset shadow. A positive value (that is, 5px) causes the shadow to be at the bottom of the box, and a negative value (that is,-10px) will make it biased.
Blur (Blur): Sets the softening radius. The default value is 0, which means there is no blur. Positive values increase the blur, while negative values actually reduce the shadow. This property defaults to 0.
Clolor (color): The color value, which is the setting of the shadow color.

Reminder: This attribute can be added to any element, slice, div,span,p tag, etc.

Here is an example of a specific shadow, as shown in the sample effect diagram and the specific code:

Above this simple little tutorial on CSS3, hope to help everyone.