[分享]css做输入框凹凸效果

CSS是网页设计中的重要组成部分，通过CSS可以实现各种各样的效果，例如输入框凹凸效果就是其中一种。要实现输入框的凹凸效果，可以使用CSS3中的boxshadow属性。该属性可以设置阴影的样式、颜色、...

CSS是网页设计中的重要组成部分，通过CSS可以实现各种各样的效果，例如输入框凹凸效果就是其中一种。

要实现输入框的凹凸效果，可以使用CSS3中的box-shadow属性。该属性可以设置阴影的样式、颜色、偏移量和模糊半径。下面是一个实现输入框凹凸效果的示例：

input[type="text"] {
  border: none;
  background: #f2f2f2;
  padding: 10px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1),
              0 0 10px rgba(0,0,0,0.1);
} 

在这个示例中，我们首先去掉了输入框的边框，并设置了一个灰色的背景。接下来，通过box-shadow属性添加了一个内阴影和一个外阴影，从而实现了输入框的凹凸效果。

box-shadow属性的第一个值是阴影的类型，inset表示内阴影，而不写或者写outset则表示外阴影。其余三个值分别是水平偏移量、垂直偏移量和模糊半径，可以根据需要进行调整。最后一个值是阴影的颜色，可以使用rgba颜色模式来设置透明度。

除了box-shadow属性外，我们还可以使用其他方式来实现输入框的凹凸效果，如使用border-radius属性和background属性来设置圆角和渐变色背景等。但是box-shadow属性比较简单，易于实现，且效果不错，因此在实际项目中较为常用。