是否可以在表单css中为输入添加框阴影？

Question

我一直在尝试为我的输入框添加一些时髦的效果,我发现一个是盒子阴影,我看了w3schools教程的盒子阴影,并尝试了多个东西将它添加到我的输入框:

.l_input {
  box-shadow: 10px;
}

这对我的代码似乎不起作用.我也尝试使用悬停伪效果使用它,它再次不起作用,我尝试的伪代码:

.l_input {
  box-shadow: 5px;
}
.l_input:hover {
  box-shadow: 10px;
  transition: 2s;
}

而且这似乎没有用,如果这是代码应该如何工作的正确语法,或者我提前做了一个小错误,我认为可能它不支持输入,但听起来很奇怪.

Answer 1

.l_input  {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: 0.3s ease-in-out;
}

/* hover effect  */
.l_input:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

<div class="l_input"> Content <div>

Answer 2

您可以像下面这样提供盒子阴影：

.l_input {
    box-shadow: 5px 5px 5px #000;
}

您应该至少给出前两个值。

前两个描述水平阴影和垂直阴影。第三个是模糊和色彩。

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

参考链接：

工作小提琴

并且您可以按照以下方式赋予阴影效果。

.l_input {
 box-shadow: 5px 5px 5px #000;
}
.l_input:hover {
  box-shadow: 10px 10px 10px #000;
  transition: 2s;
}

小提琴