如何实现谷歌搜索框鼠标悬停时的边缘阴影效果？
在谷歌搜索中，当鼠标悬停在搜索框和按钮上时，会产生一种精致的边缘阴影效果。实现这一效果需要使用 css 的 box-shadow 属性。
box-shadow 属性
box-shadow 属性允许在元素周围创建阴影效果。其语法为：
box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [阴影颜色];
实现阴影效果
要在搜索框和按钮上创建边缘阴影效果，可以设置如下 css 样式：
.search-box, .search-button {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.2s ease-in-out;
}
.search-box:hover, .search-button:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}使用方法
- 为搜索框和按钮添加 search-box 和 search-button 类。
- 应用 box-shadow 属性，为非悬停状态设置阴影，并为悬停状态设置更深的阴影。
- 使用 transition 属性平滑悬停时的阴影过渡效果。
如此一来，当鼠标悬停在搜索框或按钮上时，就会出现精美的边缘阴影效果。
