Gradient miscellaneous, gradient

Gradient miscellaneous, gradient

Some small projects are not designed at work, which is terrible for me with weak PS base. In desperation, I had to learn about the UI by myself, but for some background styles that can be implemented with CSS, I still try to use the knowledge I have mastered to achieve it. This article mainly shares gradient, A CSS3 attribute that I previously ignored, that I have reached the most in the design background image.

1. linear gradient of linear-gradient. The basic format is: background: linear-gradient (red, black). The implementation style is as follows:

Background-image: linear-gradient (to right, red, black);, the implementation style is as follows:

Background-image: linear-gradient (45deg, red, black );

Background-image: linear-gradient (to right, red, yellow, black );

Background-image: linear-gradient (to right, red, yellow 25%, black 50% );

Background-image: linear-gradient (to right, red 25%, yellow 25%, yellow 50%, black 50%, black 100% );

Background-image: radial-gradient (red, black );

Background-image: radial-gradient (circle at top left, red, black );

Background-color: red; background: linear-gradient (90deg, blue 15px, transparent 0), linear-gradient (90deg, black 30px, transparent 0), linear-gradient (90deg, yellow 45px, transparent 0); background-size: 45px;

The gradient attribute level entered first is relatively high, so the transparent is used to display the subsequent attributes.

Background-color: # fff; background-image: linear-gradient (45deg, #000 7px, transparent 0), linear-gradient (45deg, #000 7px, transparent 0 ), linear-gradient (225deg, #000 7px, transparent 0), linear-gradient (225deg, #000 7px, transparent 0); background-size: 20px; background-position: 0 0, 10px 9px, 20px 18px, 10px 9px;

Repeating-linear-gradient and repeating-radial-gradient

　　

.repeat-linear{    background:    repeating-linear-gradient(red,black 5%);}.repeat-radial{    background:    repeating-radial-gradient(red,black 5%);}

All the above Code implementations use advanced browsers. For compatibility issues, please use Baidu.