[001]linear-gradient属性

linear-gradient

background: linear-gradient(direction, color-stop1, color-stop2, …)
direction可以是[ angle | to side-or-corner ]
linear-gradient(30deg, #3f87a6, #ebf8e1);
linear-gradient(to left, #333, #333 50%,#333 100%);

我们平时的渐变是这样子的
background: linear-gradient(#e66465 50%, #9198e5 100%);
[001]linear-gradient属性_第1张图片
可是这里有个技巧,当前一个渐变的结束和后一个渐变的开始的位置是一样的话,那么就没有渐变了
background: linear-gradient(#e66465 50%,#9198e5 50%, #9198e5 100%);
[001]linear-gradient属性_第2张图片

挑战

  1. 利用linear-gradient实现冰棍上部分
    [001]linear-gradient属性_第3张图片
    效果预览
    代码地址
  2. 利用linear-gradient来制作冰箱
    [001]linear-gradient属性_第4张图片
    效果预览
    代码下载

你可能感兴趣的:(css奇技淫巧)