Easy to Master CSS3 Shadows, reflections, gradient tips

The following small series for everyone to bring a 5 minutes to let you master CSS3 Shadow, reflection, gradient tips (small recommended). Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

Do:

Second, first set up two text do not do processing operation

Third, add a shadow to the first P font

Text-shadow: 5px 5px red;

text-shadow:5px 5px 5px red,5px-5px 10px yellow;

Box-shadow: Usage is similar to Text-shadow, except that it is a box, such as P

text-shadow:[color (color)  x axis (x offset) y axis (y offset) blur radius (Blur)],[color (color) x axis (X Offset) y axis (y offset) blur radius (Blur)] ... The first two values can be negative, the third cannot make a negative number, can be 0 (no effect)

Iv. add a reflection to the first P

-webkit-box-reflect:below px ;

Direction (above on below left right) spacing.

Note: The reflection does not occupy the space of the document flow, the level is higher than the document flow Reflection is for the label (wide height)

V. Adding gradients

Background-image:-webkit-linear-gradient(left, red 0, yellow );

The first percentage is from 0% to this percentage is all this color, the last percentage from this percentage to 100% is all this color, in the middle if the different percentages are gradients, the same is the dividing line.

Six, all code:

<!        DOCTYPE html>

The above 5 minutes let you master CSS3 Shadow, reflection, gradient tips (small recommended) is a small part of the whole content to share to everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.