设置框阴影样式[关闭]

Question

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

关闭13小时前。

如何制作这样的盒子阴影？使用CSS或javascript。

这是stackoverflow表单登录。

Answer 1

取决于浏览器，但您可以使用此浏览器：

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid red;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(25, 65, 222, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(25, 65, 222, 1);
}

Answer 2

您可以使用此：

input[type=text]{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #37abff;;
    border-radius: 2px;
}   
input[type=text]:focus{
    box-shadow: 0 0 1px 3px #c7e7fed7;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #87c8f9;
}

<input type="text" />