CSS控制輸入框大小的方法

在CSS中，我們可以使用多種屬性來(lái)控制輸入框的大小，以下是一些常用的方法：

1、寬度和高度：

- 使用width屬性設(shè)置輸入框的寬度。

- 使用height屬性設(shè)置輸入框的高度。

設(shè)置輸入框的寬度為200像素，高度為50像素：

```css

input {

width: 200px;

height: 50px;

}

```

2、邊框：

- 使用border屬性可以添加邊框到輸入框，并可以通過(guò)設(shè)置邊框的寬度來(lái)調(diào)整輸入框的大小。

添加2像素寬的邊框：

```css

input {

border: 2px solid #000;

}

```

3、內(nèi)邊距：

- 使用padding屬性可以設(shè)置輸入框的內(nèi)邊距，即邊框與文字之間的空間，增加內(nèi)邊距會(huì)使輸入框看起來(lái)更大。

設(shè)置內(nèi)邊距為10像素：

```css

input {

padding: 10px;

}

```

4、字體大小：

- 使用font-size屬性可以設(shè)置輸入框中文字的字體大小，增大字體也會(huì)使輸入框看起來(lái)更大。

設(shè)置字體大小為18像素：

```css

input {

font-size: 18px;

}

```

5、顏色：

- 使用color屬性可以設(shè)置輸入框中文字的顏色，通過(guò)改變顏色可以使輸入框更加突出或融入背景。

設(shè)置文字顏色為藍(lán)色：

```css

input {

color: blue;

}

```

6、背景色：

- 使用background-color屬性可以設(shè)置輸入框的背景色，通過(guò)改變背景色可以使輸入框更加醒目或與其他元素協(xié)調(diào)。

設(shè)置背景色為黃色：

```css

input {

background-color: yellow;

}

```

7、圓角：

- 使用border-radius屬性可以為輸入框添加圓角，使其看起來(lái)更加友好和現(xiàn)代化。

添加10像素的圓角：

```css

input {

border-radius: 10px;

}

```

8、陰影：

- 使用box-shadow屬性可以為輸入框添加陰影效果，增加視覺(jué)上的深度感。

添加2像素寬的陰影：

```css

input {

box-shadow: 2px 2px 5px #888;

}

```

通過(guò)組合使用這些屬性，你可以根據(jù)自己的設(shè)計(jì)需求來(lái)定制輸入框的外觀和大小。