歡迎光臨一流素材網,免積分免費素材下載!

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
給個評價吧
长百集团股票行情