CSS怎么设置渐变
小编给大家分享一下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怎么设置渐变”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。