Get the App
SLTechnology News&Howtos  ›  Development  › 

How to set the gradient by CSS

Shulou Source: shulou.com Published: 2022-06-01 12:53:58 11月13日 Update

Editor to share with you how to set CSS gradient, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

They are linear gradient and radial gradient respectively. Gradients are generally set in the background and correspond to elements.

The following is the source code:

Gradient-(yisu.com) # box1 {/ * Linear gradient * / width: 500px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=0, startColorStr=#eb5757, endColorStr=#000000); / * IE 6 7 8gradient / background:-ms-linear-gradient (top, # eb5757, # 000000) / * IE 10 * / background:-moz-linear-gradient (top, # eb5757, # 000000); / * Firefox * / background:-webkit-gradient (linear, 0%, 0% 100%, from (# eb5757), to (# 000000)) / * Google * / background:-webkit-gradient (linear, 0%, 0% 100%, from (# eb5757), to (# 000000)); / * Safari 4-5, Chrome 1-9 percent / background:-webkit-linear-gradient (top, # eb5757, # 000000) / * Safari5.1 Chrome 10 gradient / background:-o-linear-gradient (top, # eb5757, # 000000); / * Opera 11.10 gradient /} # box2 {/ * Radial gradient * / width:500px; height:200px; background:-webkit-radial-gradient (# eb5757, # 000000) / * Safari 5.16.0* / background:-o-radial-gradient (# eb5757, # 000000); / * Opera 11.612.0mm / background:-moz-radial-gradient (# eb5757, # 000000); / * Firefox 3.615 hours /}

The above is all the content of the article "how to set gradient in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Tags: Articles content radial linear less elements most more source code Firefox knowledge background industry information information channels channels not for reference discoloration learning Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Huawei macOS NVidia Shulou Tech Info Linux