?> Background：:point_right: gradient, linear-gradient, radial-gradient, repeating-linear-gradient
Linear gradient linear-gradient is a very important module of CSS3, but in real development, they are not commonly used. Here, I will give two scenarios that I often use, namely progress bar and Irregular card
<script v-pre type="text/x-template" id="stripes-background-linear"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .progress-outer { width: 60%; height: 12px; border-radius: 8px; overflow: hidden; position: relative; } .progress-enter { height: inherit; background: rgba(180, 160, 120, .2); } .progress-bg { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0); background-size: 16px 16px; animation: panoramic 20s linear infinite; } @keyframes panoramic{ to { background-position: 200% 0; } } </style>Work overtime today.
<script v-pre type="text/x-template" id="stripes-background-radial"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .coupon-card { width: 200px; height: 120px; background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px); } </style> <script> </script> </script>Today's work is seriously overtime.
In the example above, to achieve: a shadow of the welt effect added when hovering, so we apply the
radial-gradient. If you have better propose, welcome to leave a message ~
《CSS Secrets》author Lea Verou uses the CSS3 gradient to implement the pattern library Patterns Gallery，and its SVG version SVG Patterns Gallery, if you are interested, it would be very helpful to research the author's implementation principle.
<iframe width="100%" height="436px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe>