Shulou(Shulou.com)06/03 Report--

This article mainly introduces css3 how to achieve shadow, reflection, gradient effect, the article is very detailed, has a certain reference value, interested friends must read it!

First, effect

Do:

Second, first, set up two texts and run as shown in the figure without processing.

Shadow the first div font

Text-shadow: 5px 5px 10px red

Text-shadow: 5px 5px 5px red,5px-5px 10px yellow

Box-shadow: the usage is similar to text-shadow, except that it is for boxes, such as DIV

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 can not be negative, can be 0 (no effect)

Add a reflection to the first div

-webkit-box-reflect:below 10px

Direction (left and right left right under below on above) spacing.

Note: the reflection does not take up the space of the document stream, the level higher than the document stream reflection is for the tag (width and height).

Fifth, add gradual change

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

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

6. All codes:

CSS3 div {font-size: 30px; width: 300px; height: 100px; background-image:-webkit-linear-gradient (left, red 0%, yellow 50%); / * gradient * / color: blue -webkit-box-reflect:below 10px; / * reflection * / text-shadow: 5px 5px 10px red; / * Shadow * /} span {background: aqua;}

I can do a somersault! Ha ha ha

The position that the reflection can't grasp is taken up! The position that the reflection can't grasp is taken up! The position that the reflection can't grasp is taken up! The position that the reflection can't grasp is taken up! The above is all the content of the article "how to achieve Shadow, reflection and gradient effect in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.