CSS文本框凹陷是一種常見的樣式效果,它可以為網(wǎng)站帶來更加有層次感的視覺效果。如果你想要為你的網(wǎng)站添加一些凹陷效果,可以使用以下的CSS樣式:
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); }
上面的代碼中,我們通過為文本框添加一個內(nèi)部陰影和一個外部陰影的方式來實(shí)現(xiàn)凹陷效果。其中,box-shadow屬性的inset關(guān)鍵字表示要添加內(nèi)部陰影,rgba()函數(shù)用于設(shè)置陰影顏色和透明度。
此外,我們還設(shè)置了文本框的padding為10px,以保證文字內(nèi)容不會靠近文本框邊緣。同時,為了突出凹陷效果,我們將文本框的border設(shè)為none,將background-color設(shè)置為#f1f1f1。
需要注意的是,以上樣式只能應(yīng)用于input類型為text的文本框,如果你想要為其他類型的文本框添加凹陷效果,可以通過修改樣式來實(shí)現(xiàn)。