css3鼠标经过显示背景阴影

CSS3具备了许多强大的效果，其中之一就是可以让鼠标经过一个元素时，显示其背景阴影。这样增加了页面的交互性和美观性。接下来，我们来学习如何使用CSS3实现这一功能。

.Box{
  width:200px;
  height:150px;
  background-color:#fff;
  border:1px solid #ccc;
  Box-shadow: 0 2px 4px rgba(0,0.24);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.Box:hover{
  Box-shadow: 0 4px 8px rgba(0,0.3);
}

上述代码就是一个简单的示例，我们可以通过它来实现鼠标经过时显示背景阴影的效果。

首先，我们定义了一个class为“Box”的元素，其宽度为200px，高度为150px，背景颜色为白色，边框为1px实线的灰色。此外，我们还为它添加了一个盒子阴影效果，即Box-shadow属性。其中，第一个参数表示水平偏移值，第二个参数表示垂直偏移值，第三个参数表示阴影半径，第四个参数表示阴影的颜色和透明度。在这里，我们采用了rgba颜色模式，即红绿蓝透明度，其中，“0.24”表示阴影透明度。

然后，我们在“Box”类的hover状态下，重新定义了Box-shadow属性。在这里，我们将阴影半径增加为8px，并将透明度提高为0.3，使阴影更加明显。此外，我们还为其添加了CSS3过渡效果，即transition属性，以提高用户体验。

通过上述代码，我们可以轻松实现鼠标经过时显示背景阴影的效果。这不仅可以增加页面的交互性，还可以提高页面的美观度。