小编给大家分享一下CSS怎么设置渐变，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

分别为线性渐变和径向渐变。渐变一般设置在背景，与元素相对应。

以下为源码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>渐变色-亿速云(yisu.com)</title><styletype="text/css">#box1{/*线性渐变*/width:500px;height:200px;FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#eb5757,endColorStr=#000000);/*IE678*/background:-ms-linear-gradient(top,#eb5757,#000000);/*IE10*/background:-moz-linear-gradient(top,#eb5757,#000000);/*火狐*/background:-webkit-gradient(linear,0%0%,0%100%,from(#eb5757),to(#000000));/*谷歌*/background:-webkit-gradient(linear,0%0%,0%100%,from(#eb5757),to(#000000));/*Safari4-5,Chrome1-9*/background:-webkit-linear-gradient(top,#eb5757,#000000);/*Safari5.1Chrome10+*/background:-o-linear-gradient(top,#eb5757,#000000);/*Opera11.10+*/}#box2{/*径向渐变*/width:500px;height:200px;background:-webkit-radial-gradient(#eb5757,#000000);/*Safari5.1-6.0*/background:-o-radial-gradient(#eb5757,#000000);/*Opera11.6-12.0*/background:-moz-radial-gradient(#eb5757,#000000);/*Firefox3.6-15*/}</style></head><body><divid="box1"></div><pid="box2"></p></body></html>

以上是“CSS怎么设置渐变”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！