如何在鼠标悬停上顺利插入框阴影效果？

Question

如何在此website

上创建平滑的文本输入框阴影效果

Answer 1

使用CSS3：

#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}

#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}

Answer 2

尝试在那里使用Firebug或类似工具。

你声明了一些初始的“不可见”框阴影及其可见对应物，并声明了一些过渡：

.elem {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

此样式是从该网站中提取的。

编辑：你想要鼠标悬停而非聚焦。

Answer 3

.element
{
   background-color: #fff;
   border: 1px solid #ccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
   -webkit-transition: border linear .2s,box-shadow linear .2s;
   -moz-transition: border linear .2s,box-shadow linear .2s;
   -o-transition: border linear .2s,box-shadow linear .2s;
   transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover 
{
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}