如何使用框阴影突出显示焦点输入 - CSS

在网页表单中，当用户在输入框中输入信息时，我们通常希望能够清晰地知道当前输入框中的焦点。一种常见的做法是通过给焦点输入框添加框阴影来突出显示。在本文中，我们将介绍如何使用CSS实现这一效果。

HTML 结构

首先，我们需要准备一个包含输入框的HTML结构。可以使用以下代码片段作为例子：

<form>
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <label>
    Email:
    <input type="email" name="email">
  </label>
  <button type="submit">Submit</button>
</form>

CSS 样式

接下来，我们需要使用CSS定义当输入框获得焦点时所要显示的框阴影。可以使用以下代码片段作为例子：

input:focus {
  box-shadow: 0 0 5px 1px #2196F3;
}

这段代码使用了CSS的:focus选择器，它能够选择当前获得焦点的元素。我们为input元素添加了这个选择器，并定义了一个box-shadow属性。

box-shadow属性可以用来给元素添加一个矩形的、带阴影的边框。它的取值包括：

• 第一个参数：水平偏移量，正值向右偏移，负值向左偏移。
• 第二个参数：垂直偏移量，正值向下偏移，负值向上偏移。
• 第三个参数：阴影模糊半径，值越大，阴影越模糊。
• 第四个参数：阴影扩散半径，值越大，阴影越扩散。
• 第五个参数：阴影颜色，可以使用颜色名称或十六进制值表示。

在上面的例子中，我们定义了一个蓝色的阴影，它的扩散半径是1像素，模糊半径是5像素。试着修改这些值并观察效果。

总结

通过使用:focus选择器和box-shadow属性，我们可以为焦点输入框添加一个简单的框阴影效果，能够让用户更清晰地知道当前输入框中的状态。