欢迎光临一流素材网,免积分免费素材下载!

CSS3背景颜色渐变 - 线性/放射性/循环

所属栏目:css3基础教程更新时间:2020-02-02 来源:网络 原作者:不详 发布:deepdfhy浏览:0

渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性。同时为了兼容各个浏览器(IE,safari,chrome,Firefox),还需要添加对应的带前缀的渐变

一、线性渐变

1、使用linear-gradient()函数可以创建渐变

CSS

.menu {
        background: linear-gradient(top, #1770CE, #0352a2);
        background: -ms-linear-gradient(top, #1770CE, #0352a2);
        background: -webkit-linear-gradient(top, #1770CE, #0352a2);
        background: -moz-linear-gradient(top, #1770CE, #0352a2);
      }

HTML

<div class="menu"></div>

image

<div class="box2"></div>
.box2 {
        width:200px;
        height: 200px;
        background: linear-gradient(top left, white, blue);/*渐变从左上角到右下角*/
        background: -ms-linear-gradient(top left, white, blue);
        background: -webkit-linear-gradient(top left, white, blue);
        background: -moz-linear-gradient(top left, white, blue);
    }

image



收藏 0 有帮助 0 没帮助 0 打赏 0
给个评价吧