An example of how to use css radiation gradient to achieve light and shade effect

Now we can use the style css radiation gradient to achieve a text light and shade effect as shown in the following figure.

We can see the effect of similar beam irradiation on text, which highlights the text. This is easy to implement. You only need to center the text and set the radiation gradient of the background element from the center. The code is as follows:

 

The code is as follows:	Copy code
// HTML code < Div Class = "box"> like </ Div >

 

The code is as follows:	Copy code
// CSS code: . Box { Width: 200px; Height: 200px; Font-size: 80px; Line-height: 200px; Text-align: center; Background:-webkit-radial-gradient (# feb3ad, # fd695d ); Background:-o-radial-gradient (# feb3ad, # fd695d ); Background:-moz-radial-gradient (# feb3ad, # fd695d ); Background: radial-gradient (# feb3ad, # fd695d ); }

In this way, the most basic light and shade background effect is complete. You can adjust the color to set the brightness of the light and shade. The closer the light is to the brighter the white color. Adjust the halo effect range by adjusting the percentage of central colors, as shown in Figure 5.20.

Adjust the halo effect

Compared with images, developers can change the effect by directly adjusting the parameters in CSS code, greatly improving the flexibility and development speed.