谷歌搜索悬停阴影效果解析
在谷歌搜索页面中，当鼠标悬停在搜索框或按钮上时，会出现一个微妙的边缘阴影。想要了解这一效果的实现原理，许多开发者可能率先想到使用 css。
css 探索
遗憾的是，在 css 代码中无法找到与阴影效果直接相关的属性或值。继续探索其他实现方法。
浏览器开发者工具助力
使用浏览器开发者工具（例如 chrome 或 firefox）可以直观地了解元素的外观和行为。通过选择搜索框元素，并切换到 :hover 伪类，你会发现盒阴影属性被激活。
盒阴影（box-shadow）
盒阴影属性为元素添加阴影效果，具体语法为：
box-shadow: inset x-offset y-offset blur-radius color;
在谷歌搜索中，inset 值用于向内生成阴影，color 为黑色，blur-radius 非常小，从而产生微妙的边缘效果。
鼠标悬停实现
最终，当鼠标悬停在搜索框或按钮上时，触发 :hover 伪类并激活盒阴影属性，产生边缘阴影效果。
技巧提示
如果你有兴趣深入了解 css 和浏览器开发者工具的用法，不妨查阅以下资源：
- [盒阴影 - css：层叠样式表 | mdn](https://developer.mozilla.org/zh-cn/docs/web/css/box-shadow)
- [devtools tricks](https://segmentfault.com/a/1190000015320104)
通过使用盒阴影属性并结合 :hover 伪类，你可以为自己的 web 项目实现类似的鼠标悬停阴影效果。
