linear-gradient垂直、水平、斜向、渐变

linear-gradient第一个参数默认top(垂直)，可为left、right、0deg、30deg、45deg、90deg、135deg......

html

<div  class="linear1"></div>
<div  class="linear2"></div>
<div  class="linear3"></div>
<div  class="linear4"></div>

1、垂直

.linear1{
  width:100px;
  height:30px;
  margin: 10px auto;
  background: linear-gradient(orange 0%,#fff 48%,#fff 52%,orange 100%);
}

2、水平

.linear2{
  width:100px;
  height:30px;
  margin: 10px auto;
  background: linear-gradient(90deg,#f3f3f3 0,#eee 12%,#fff 48%,#fff 52%,#eee 88%,#f3f3f3 100%);
}

3、渐变

.linear3{
  width:100px;
  height:30px;
  margin: 10px auto;
  background: linear-gradient(135deg,#eee 0,#ddd 12%,#fff 48%,#fff 52%,#ddd 75%,#eee 100%);
}

4、斜向

.linear4{
  width:100px;
  height:30px;
  margin: 10px auto;
  background: linear-gradient(135deg,orange 0,orange 25%,rgb(245, 123, 42) 25%,rgb(245, 123, 42) 50%,orange 50%,orange 75%,rgb(245, 123, 42) 75%,rgb(245, 123, 42) 100%);
}