CSS文本框加陰影的教程

CSS是一種用于設計和布局網頁的樣式表語言。文本框是一種常見的網頁元素，用于放置文本內容。為了讓文本框具有更好的視覺效果，我們可以使用CSS樣式表對其添加陰影。

下面是一個簡單的CSS代碼，可以將文本框添加陰影：

input[type="text"], select {

border: 1px solid #ccc;

border-radius: 4px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

在這個例子中，我們使用了`border-radius`和`box-shadow`屬性來創建陰影效果。`border`屬性用于設置文本框的邊框顏色，`border-radius`屬性用于設置邊框的半徑和圓角的大小，`box-shadow`屬性用于設置文本框的漸變顏色和半徑。

下面是一個使用不同顏色陰影的示例：

input[type="text"], select {

border: 1px solid #ccc;

border-radius: 4px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) 0px 5px 10px rgba(0, 0, 0, 0.1);

在這個例子中，我們使用了`0px`、`5px`和`10px`這三個半徑來創建不同顏色的陰影。在第二個示例中，我們使用了` rgba(0, 0, 0, 0.1)`屬性來設置陰影的透明度。

使用上述CSS代碼，我們可以為文本框添加陰影，使文本更加立體感和視覺效果更加好。