css进阶（背景颜色渐变、过渡）

背景颜色径向渐变

• 径向渐变：中间部分椭圆形，四周填充（由中间到四周渐变）

  background: radial-gradient(red,yellow);          红椭圆填充黄色
  background: radial-gradient(circle,red,yellow);   红正圆填充黄色
  background: radial-gradient(red 60%,yellow 60%);  红60%，之后黄色
  background: radial-gradient(50px 50px,red 50px,black 100px);   圆的垂直半径，水平半径设置
  background: radial-gradient(at left top,red 50%,black 50%);    at设置圆心位置，来达到控制方向
  background: repeating-radial-gradient(red 20px,green 50px);    圈圈套圈圈，循环

背景颜色线性渐变

• 默认由上到下渐变（可设置渐变方向）

 background: linear-gradient(red,yellow);  颜色由红变黄
 background: linear-gradient(red 60%,yellow 60%);  红色占60%，然后开始渐变红到黄。
                                                   然后黄色从60%开始，就会形成分割线
 background: linear-gradient(to right,red,yellow);  到右，从左到右
 background: linear-gradient(to left,red,yellow);   到左，从右到左
 background: linear-gradient(to right bottom,red,yellow);  到右下
 background: linear-gradient(60deg,red,yellow);  旋转60度
 background: repeating-linear-gradient(black 0 , black 10px , transparent 10px , 
             transparent 20px)     repeating-linear-gradient规定颜色范围，方便循环

过渡

1. transition-duration 过渡持续时间（duration：持续时间）
2. transition-property 需要执行过渡的样式（默认all：都改变。width:只改变宽，height：只改变高）
3. transition-delay 过渡延迟时间（delay：延迟）
4. transition-timing-function 过渡速度快慢曲线（默认：慢快慢，linear：匀速）
   更多曲线查看贝塞尔曲线
5. transition 复合样式。过渡时间/延迟时间，其他顺序任意写

折叠效果

<button @click="aa = !aa">123</button>
<div :class="aa ? 'aa' : ''" class="aazhankai">
    <div>21321321</div>
    <div>21321321</div>
    <div>21321321</div>
</div>

.aa {
  height: 0 !important;
}
.aazhankai {
  height: 300px;
  background: red;
  transition: height .5s ease-in-out;
  overflow: hidden; //注意这个还是很关键
}