猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

css3渐变色怎么来实现，css3渐变色怎么写

css3渐变色怎么来实现，css3渐变色怎么写


白板的微信
浏览 1067回答 2
2回答

侃侃无极

1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8">&nbsp;&nbsp;&nbsp;&nbsp;<title>Document</title>&nbsp;&nbsp;&nbsp;&nbsp;<style&nbsp;type="text/css">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div{&nbsp;&nbsp;/*线性渐变*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:300px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:150px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:red;&nbsp;/*&nbsp;一些不支持背景渐变的浏览器&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:-moz-linear-gradient(top,&nbsp;red,&nbsp;rgba(0,&nbsp;0,&nbsp;255,&nbsp;0.5));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:-webkit-gradient(linear,&nbsp;0&nbsp;0,&nbsp;0&nbsp;bottom,&nbsp;from(#ff0000),&nbsp;to(rgba(0,&nbsp;0,&nbsp;255,&nbsp;0.5)));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:-o-linear-gradient(top,&nbsp;red,&nbsp;rgba(0,&nbsp;0,&nbsp;255,&nbsp;0.5));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p{&nbsp;&nbsp;/*径向渐变*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:300px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:150px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-webkit-radial-gradient(red,&nbsp;green,&nbsp;blue);&nbsp;/*&nbsp;Safari&nbsp;5.1&nbsp;-&nbsp;6.0&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-o-radial-gradient(red,&nbsp;green,&nbsp;blue);&nbsp;/*&nbsp;Opera&nbsp;11.6&nbsp;-&nbsp;12.0&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-moz-radial-gradient(red,&nbsp;green,&nbsp;blue);&nbsp;/*&nbsp;Firefox&nbsp;3.6&nbsp;-&nbsp;15&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style>&nbsp;</head><body><div>&nbsp;</div>&nbsp;<p>&nbsp;</p></body></html>&nbsp;&nbsp;
0

弑天下

12//&nbsp;html部分<div&nbsp;class="box"></div>&nbsp;123456789//&nbsp;css部分.box{&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;500px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-webkit-linear-gradient(to&nbsp;right,#17c864,#3fccf0);&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-moz-linear-gradient(to&nbsp;right,#17c864,#3fccf0);&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-o-linear-gradient(to&nbsp;right,#17c864,#3fccf0);&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;linear-gradient(to&nbsp;right,#17c864,#3fccf0);}&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5
CSS3