CSS gradient drawing black and white background bar
1. Simple CSS effect preview
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.
- 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-gradient、linear-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!