本文详细介绍了如何在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. 焦点状态：移除“内部阴影”
当用户通过点击或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 结构
注意事项与总结
- background-position的精确计算：确保background-position的偏移量能够正确地抵消box-shadow的偏移量和元素的border-width，这是实现完美视觉对齐的关键。任何计算上的偏差都可能导致视觉上的不协调。
- 选择器的优化：示例中使用的[class^='input']属性选择器非常方便，可以一次性选中多个输入框。但在大型项目中，如果存在更多具有相似类名的元素，可能需要更精确的选择器（例如，结合父元素或更具体的类名）来避免样式冲突。
- 用户体验：这种视觉效果可以显著增强表单的交互性和美观性。在设计时，应确保焦点和有效状态之间的过渡平滑且直观，为用户提供清晰的视觉反馈。
- 兼容性：background-image、linear-gradient和box-shadow等CSS属性在现代浏览器中具有良好的兼容性。
通过巧妙地结合box-shadow和background-image的CSS技巧，开发者可以突破传统box-shadow的限制，在输入框内部创建出富有创意和吸引力的视觉阴影效果。这种方法不仅提升了用户界面的整体设计感，也为实现独特的交互式表单元素提供了强大的工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
