zoukankan      html  css  js  c++  java
  • CSS3----渐变

    1-从上往下线性渐变:

    background: -webkit-linear-gradient(red,blue); 
    background: -o-linear-gradient(red,blue); 
    background: -moz-linear-gradient(red,blue);

     

    2-从上往下线性渐变:

    background: -webkit-linear-gradient(left,red,blue); 
    background: -o-linear-gradient(left,red,blue); 
    background: -moz-linear-gradient(left,red,blue);

     

    3-对角线性渐变:

    background: -webkit-linear-gradient(left top,red,blue); 
    background: -o-linear-gradient(left,red top,blue); 
    background: -moz-linear-gradient(left top,red,blue);

     

    4-角度线性渐变:

    background: -webkit-linear-gradient(45deg,red,blue); 
    background: -o-linear-gradient(45deg,red ,blue); 
    background: -moz-linear-gradient(45deg ,red,blue);

     

    5-多中颜色线性渐变:

    background: -webkit-linear-gradient(green,red,blue); 
    background: -o-linear-gradient(green,red ,blue); 
    background: -moz-linear-gradient(green ,red,blue);

     

    6-透明线性渐变:

    background: -webkit-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1)); 
    background: -o-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1)); 
    background: -moz-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));

     

    7-重复线性渐变:

    background: -webkit-repeating-linear-gradient(red ,green 20%,blue 20%); 
    background: -o-repeating-linear-gradient(rgba(red ,green 20%,blue 20%); 
    background: -moz-repeating-linear-gradient(red ,green 20%,blue 20%);

     

    8-径向渐变--均匀分布:

    background: -webkit-radial-gradient(red ,green); 
    background: -o-radial-gradient(red,green);
    background: -moz-radial-gradient(red,green);

     

    9-径向渐变--不均匀分布:

    background: -webkit-radial-gradient(red 10% ,green 40%); 
    background: -o-radial-gradient(red 10% ,green 40%);
    background: -moz-radial-gradient(red 10% ,green 40%);

     

    10-径向渐变--形状分布:

    background: -webkit-radial-gradient(60% 55%,farthest-side,red,green,yellow,black); 
    background: -o-radial-gradient(60% 55%,farthest-side,red,green,yellow,black);
    background: -moz-radial-gradient(60% 55%,farthest-side,red,green,yellow,black);

  • 相关阅读:
    [不好分类]关于河北盛华化工有限公司附近爆炸原因猜测
    [到处走走]北京胜利饭店
    reviews of learn python3 the hard way
    [攻防实战]CTF大赛准备(手动注入sql)
    白帽子讲web安全读后感
    论一带一路和携号转网
    [不好分类]南京共享图书馆的探索
    区块链的应用
    SpringMVC学习之REST
    SpringMVC学习六
  • 原文地址:https://www.cnblogs.com/SunlikeLWL/p/8793041.html
Copyright © 2011-2022 走看看