CSS gradient drawing black and white background bar

Time:2021-12-9

CSS gradient drawing black and white background bar

1. Simple CSS effect preview

CSS gradient drawing black and white background bar

CSS gradient drawing black and white background bar
CSS gradient drawing black and white background bar
After reading some CSS styles above, do you think it is a picture linked through an image? In fact, these are all realized through one line of CSS.

2. background

  • We usually usebackgroundProperty to add a background picture to the web page to achieve a cool background effect. In fact, we can add external background pictures throughradial-gradientlinear-gradien… customize special background effects so that you can reduce picture requests without getting the eyes of the UI sister? Why not! Next, let’s take a look!
  • Figure 1 implementation: repeating linear gradient
background: repeating-linear-gradient(45deg, white, 25px, yellow 25px, 25px, black 50px);
  • Figure 2 implementation: radial gradient
 background: radial-gradient(red, yellow 30%, black 70%, black 100%);
  • Figure 3 Implementation: linear gradient
background: linear-gradient(45deg, red 0, green);

Yes, you’re right. It’s that simple. If you want to learn more CSS practical skills, please continue to pay attention!