input[type="text"] { border: none; padding: 10px; background-color: #f1f1f1; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(255,255,255,0.5); }
上面的代码中,大家通过为文本框添加一个内部阴影和一个外部阴影的方式来实现凹陷效果。其中,box-shadow属性的inset关键字表示要添加内部阴影,rgba()函数用于设置阴影颜色和透明度。
此外,大家还设置了文本框的padding为10px,以保证文字内容不会靠近文本框边缘。同时,为了突出凹陷效果,大家将文本框的border设为none,将background-color设置为#f1f1f1。
需要注意的是,以上样式只能应用于input类型为text的文本框,如果你想要为其他类型的文本框添加凹陷效果,可以通过修改样式来实现。