css 渐变底色

最新推荐文章于 2024-12-19 11:06:31 发布

原创最新推荐文章于 2024-12-19 11:06:31 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

background:-webkit-gradient(linear, 51% 100%, 52% 0%, from(#FFFFFF), to(#0000FF)) 或

background:-webkit-gradient(radial, 271 59, 4, 220 -257, 465, from(#0000FF), to(#FFFFFF))

background:-moz-linear-gradient( top,#00A6FF,#FFFFFF);

现行渐变
首先看下示例
（1）垂直渐变

（2）垂直渐变

IE系列
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平

Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
参数：top、bottom垂直，left、right水平例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
参数：top、bottom垂直，left、right水平例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

webkit，如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色