Html中背景色之颜色渐变

颜色渐变:

  原理:以水平中心开始顺时针画圆

    1.颜色渐变分为水平渐变与放射性渐变

    线性渐变:

      写法一:background:liner-gradient(red,black)【表示颜色从上往下,从红到绿转换,各占50% (默认)】

           


      写法二:liner-gradient(to right,red,green)【表示颜色的渐变方向(也是九宫格)】

      



      写法三:background:liner-gradient(45deg,red,black)【表示中中间的水平线顺时针旋转10度开始渐变】

    


     写法四:background:liner-gradient(red 20%,black 30%,pink)【表示颜色渐变所占的百分比】



     写法五:复合写法background:liner-gradient(to top right,red 20%,blact 30%,pink)【表示颜色从右下角往左上角,从红色开始渐变到20%,在由绿色从20%渐变到30%,剩下的都是粉红色】

     颜色渐变方向有:to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】




    放射性渐变:【默认以椭圆为中心向四周扩散】

      写法:background:radial-gradient(orange,black)【写法与线性渐变相似】

        


        写法二:radial-gradient( circle 100px at center center, orange,black)【 改变放射源的形状为圆,圆心坐标在中心center center,半径为100px(可不写)】

 


  
  • 21
    点赞
  • 1
    评论
  • 47
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值