CSS中input如何加阴影

在CSS中，我们可以使用Box-shadow属性给input元素添加阴影效果。 首先，我们需要在CSS中声明input元素的样式，并设置样式的宽度、高度、边框等属性。例如：

input{
  width: 200px;
  height: 30px;
  border: none;
  border-radius: 5px;
  padding: 5px;
  Box-shadow: 0 0 10px rgba(0,0.3);
}

在这个例子中，我们给input元素设置了一个10像素的黑色半透明阴影效果。Box-shadow属性的第一个参数表示阴影的水平偏移量，第二个参数表示阴影的垂直偏移量，第三个参数表示阴影的模糊半径，第四个参数表示阴影的颜色和透明度。 如果想要添加多个阴影效果，可以用逗号分隔不同的参数值，例如：

input{
  Box-shadow: 
    0 0 10px rgba(0,0.2),0 0 20px rgba(0,0 0 30px rgba(0,0.2);
}

这个例子中，我们添加了三个阴影效果，分别是半径为10px、20px、30px的黑色半透明阴影。 此外，我们还可以将阴影效果应用到不同方向的元素上，例如上、下、左、右方向的阴影效果。例如：

input{
  Box-shadow: 0 10px 15px rgba(0,0.3);
}
input:hover{
  Box-shadow: 0 -10px 15px rgba(0,0.3);
}

这个例子中，我们给input元素添加了一个向下的阴影效果，当鼠标悬停在元素上时，阴影效果会向上展开。 总之，我们可以通过Box-shadow属性在CSS中为input元素添加各种阴影效果，使其在页面中更加美观、生动。