CSS技巧：在输入框内部模拟Box Shadow效果

本文详细介绍了如何在HTML输入框内部巧妙地模拟box-shadow效果。由于box-shadow默认在元素外部渲染，我们通过结合使用background-image和linear-gradient，并精确控制其background-position，成功地在输入框内部创建出视觉上的“阴影”区域，从而实现独特的设计需求。

挑战：box-shadow的默认行为与设计需求

在网页设计中，box-shadow属性是为元素添加阴影效果的强大工具。然而，box-shadow默认会在元素的边框（border）之外进行渲染。这意味着如果你想让阴影看起来像是从输入框内部“透出来”的效果，或者在输入框内部创建一块有颜色的区域来模拟阴影，传统的box-shadow属性无法直接满足这一需求。

为了实现这种独特的“内部阴影”视觉效果，我们需要一种创新的CSS方法。

核心技巧：利用background-image模拟内部阴影

解决方案的核心在于利用background-image属性，结合linear-gradient来在元素内部绘制一个与预期“阴影”颜色和偏移量相匹配的矩形区域。由于background-image是元素背景的一部分，它自然地呈现在元素内容区域的内部，从而巧妙地模拟出box-shadow“穿透”元素的效果。

立即学习“前端免费学习笔记（深入）”；

实现步骤详解

我们将分三个状态来阐述这种效果的实现：初始状态、焦点状态和有效状态。

1. 初始状态：创建“内部阴影”

在输入框的默认状态下，我们将同时应用一个外部的box-shadow和一个模拟内部阴影的background-image。

• box-shadow: 设置一个具有特定偏移量（例如 14px 14px）和颜色的box-shadow。这个阴影将显示在输入框的右侧和底部，作为外部的视觉补充。
• background-image: 使用 linear-gradient 创建一个纯色的背景图像。例如，linear-gradient(#54B3A1, #54B3A1) 会生成一个纯色的背景，其颜色与box-shadow的颜色保持一致。
• background-position: 这是实现“内部阴影”的关键。我们需要精确计算背景图像的偏移量，使其在视觉上与外部box-shadow的偏移相对应，但位于元素内部。如果box-shadow的水平和垂直偏移都是 X，并且输入框的border-width是 B，那么background-position应设置为 (X - B)px (X - B)px。在提供的示例中，box-shadow的偏移量为 14px，边框宽度为 2px，因此background-position设置为 12px 12px。
• background-repeat: 设置为 no-repeat，以确保背景图像只显示一次，形成一个清晰的矩形区域，而不是平铺。
• background: 将主背景设置为透明 rgba(0, 0, 0, 0)，这样我们设置的background-image才能显现出来。
• border: 保持边框的颜色和样式，使其与整体设计协调。

2. 焦点状态：移除“内部阴影”

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

当用户通过点击或Tab键将焦点移动到输入框时，通常会改变其外观以提供明确的视觉反馈。此时，我们可以选择移除“内部阴影”效果，并调整其他样式：

• box-shadow: 将其设置为 0px 0px 0px 0px black，完全移除外部的box-shadow。
• background-image: 将其设置为 linear-gradient(transparent, transparent)，使内部的模拟阴影变为透明，从而移除其视觉效果。
• 同时，可以调整输入框的宽度、边距和边框半径，以创建更动态的交互体验。

3. 有效状态：重新应用“内部阴影”

当输入框的内容通过了某种验证（例如，输入了合法的数据）时，我们可以利用:valid伪类来重新应用“内部阴影”效果，以视觉上确认其有效性。这与初始状态的设置类似：

• box-shadow: 恢复到初始的偏移量和颜色。
• background-image: 恢复到初始的纯色linear-gradient。
• background-position: 恢复到初始的偏移量。

示例代码

以下是实现上述效果的关键CSS样式和相应的HTML结构。为了简化代码，CSS中使用了属性选择器td input[class^='input']来统一匹配所有以“input”开头的类名输入框。

CSS 样式 (agev.css)

/* 针对所有以'input'开头的类名的输入框的通用样式 */
td input[class^='input'],
td input[class^=" input"] {
  width: 176px;
  height: 60px;
  border: 2px solid #FFFFFF; /* 2px白色边框 */
  background: rgba(0, 0, 0, 0); /* 主背景透明 */
  background-image: linear-gradient(#54B3A1, #54B3A1); /* 模拟内部阴影的背景图像 */
  background-position: 12px 12px; /* 偏移量：14px (box-shadow) - 2px (border) = 12px */
  background-repeat: no-repeat; /* 背景图像不重复 */
  box-shadow: 14px 14px 0px 0px #54B3A1; /* 外部box-shadow */
  margin-right: 40px;
  color: white;
  font-size: 18px;
  font-family: futuraptbook;
  text-align: center;
}

/* 焦点状态下的样式 */
td input[class^='input']:focus,
td input[class^=" input"]:focus {
  box-shadow: 0px 0px 0px 0px black; /* 移除外部box-shadow */
  width: 218px;
  margin-right: -1px;
  margin-left: -1px;
  border-radius: 0px;
  background-image: linear-gradient(transparent, transparent); /* 移除内部模拟阴影 */
}

/* 有效状态下的样式 */
td input[class^='input']:valid,
td input[class^=" input"]:valid {
  box-shadow: 14px 14px 0px 0px #54B3A1; /* 恢复外部box-shadow */
  background-image: linear-gradient(#54B3A1, #54B3A1); /* 恢复内部模拟阴影 */
  background-position: 12px 12px; /* 恢复偏移量 */
  background-repeat: no-repeat;
  width: 218px;
  margin-right: -1px;
  margin-left: -1px;
  border-radius: 0px;
}

HTML 结构

<table>
  <tr>
    <td><label class="age" for="day">DAY (DD)</label></td>
    <td><label class="age" for="month">MONTH (MM)</label></td>
    <td><label class="age" for="year">YEAR (YYYY)</label></td>
  </tr>
  <tr>
    <td><input type="text" class="input1" name="day" required></td>
    <td><input type="text" class="input2" name="month" required></td>
    <td><input type="text" class="input3" name="year" required></td>
  </tr>
</table>

注意事项与总结

• background-position的精确计算：确保background-position的偏移量能够正确地抵消box-shadow的偏移量和元素的border-width，这是实现完美视觉对齐的关键。任何计算上的偏差都可能导致视觉上的不协调。
• 选择器的优化：示例中使用的[class^='input']属性选择器非常方便，可以一次性选中多个输入框。但在大型项目中，如果存在更多具有相似类名的元素，可能需要更精确的选择器（例如，结合父元素或更具体的类名）来避免样式冲突。
• 用户体验：这种视觉效果可以显著增强表单的交互性和美观性。在设计时，应确保焦点和有效状态之间的过渡平滑且直观，为用户提供清晰的视觉反馈。
• 兼容性：background-image、linear-gradient和box-shadow等CSS属性在现代浏览器中具有良好的兼容性。

通过巧妙地结合box-shadow和background-image的CSS技巧，开发者可以突破传统box-shadow的限制，在输入框内部创建出富有创意和吸引力的视觉阴影效果。这种方法不仅提升了用户界面的整体设计感，也为实现独特的交互式表单元素提供了强大的工具。

以上就是CSS技巧：在输入框内部模拟Box Shadow效果的详细内容，更多请关注php中文网其它相关文章！