linear-gradient和-webkit-linear-gradient使用方法的不同

1.linear-gradient和-webkit-linear-gradient差异

使用语法都是:linear-gradient(direction, color-stop, color-sotp2)
他们的差异绝非仅仅是多一个webkit而一,具体的差异体现正在direction参数上面

2.dirction参数的差异和相同点

2.1不同点

  • 当使用具体的角度时候,
    • 前者0deg表示的是从下至上(即朝向竖直向上是0deg,而后顺时针是角度增大的方向)。
      *后者的0deg表示的是从左至右(朝向正右方是0deg,而后顺时针是角度增大的方向)
  • 当使用具体的关键字时候前者的direction需要to+方向关键字体例如
/*渐变的方向是从上至下由红色变成蓝色*/
background: linear-gradient(to bottom, red , blue);

在这里插入图片描述

  • 而后者不需要加to关键字,如下代码所示
/*此时指向也是从上到下,但由于没有to所以只需指明是top即可,效果图也如上所示*/
background: -webkit-linear-gradient(top, red, blue)

2.2相同点

当两者的dirction不填写的时候默认值都相同都是从上至下颜色进行渐变的。当他们的角度是不同的,这里需要注意,当然上面也介绍了他们的角度规则。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值