6.CSS3盒子新增功能 - 盒子阴影（重要） - 《CSS学习笔记(联动HTML)》

提前预习，过渡效果transition
- 注意说明

我们经常有一个需求，就是盒子本来没有阴影（变化），鼠标放上去就有阴影（变化）了，那怎么做呢？
注意：这种需求除了阴影还有很多，主要是鼠标悬停时改变样式。

需求：盒子本来没有阴影，鼠标放上去才有阴影（发生变化）
还记的a标签的 hover 伪类嘛？其实所有选择器都可以设置hover伪类，当鼠标悬停时产生变化。我们先使用最简单的div盒子模型。

<div class="demo"></div>
  <style>
    .demo {
      background-color: pink;
      height: 50px;
      width: 50px;
    }
    .demo:hover {
      border: 5px solid skyblue;
      box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, 0.3);
    }
  </style>

实现效果：

当然我们现在做出来的效果很生硬，因为没有添加过渡动画，在之后我们会学习过渡效果，就能做的更好了。

提前预习，过渡效果transition

transition过度属性可以设置最多4个参数
取值有：
<’ transition-property ‘>：检索或设置对象中的参与过渡的属性

none：不指定过渡的css属性
all：所有可以进行过渡的css属性
：指定要进行过渡的css属性（比如过渡边框就是border ，阴影就是box-shadow）

<’ transition-duration ‘>：检索或设置对象过渡的持续时间

：指定对象过渡的持续时间

<’ transition-timing-function ‘>：检索或设置对象中过渡的动画类型

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

<’ transition-delay ‘>：检索或设置对象延迟过渡的时间

：指定对象过渡的延迟时间

注意说明
复合属性。检索或设置对象变换时的过渡。
注意：如果只提供一个参数，则为 <’ transition-duration ‘> 的值定义；如果提供二个参数，则第一个为 <’ transition-duration ‘> 的值定义，第二个为 <’ transition-delay ‘> 的值定义
可以为同一元素的多个属性定义过渡效果。示例：

合并方式

div {
    transition: 
    border-color .5s ease-in .1s, 
    backgroud-color .5s ease-in .1s,
    color .5s ease-out .1s;
  }

拆分方式

div {
transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;
}

如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

transition: all .5s ease-in .1s;

现在我们就能让鼠标悬停变化有过渡效果了。修改原例为：

<div class="demo"></div>

<style>
  .demo {
    background-color: pink;
    height: 50px;
    width: 50px;
    transition: border 300ms
  }

  .demo:hover {
    border: 5px solid skyblue;
    box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, 0.3);
  }
</style>

盒子阴影（重要）

提前预习，过渡效果transition

注意说明