在网页设计中，我们经常需要为输入框添加视觉效果以提升用户体验。`box-shadow`是实现元素阴影效果的常用属性，但它通常只在元素的外部边缘生效。有时，设计需求可能要求阴影的颜色仿佛“渗透”到输入框内部，与输入框的背景融为一体，形成一种带有偏移感的内部填充效果。本文将深入探讨如何通过css的巧妙组合，实现这种既有外部阴影又有内部“填充”的独特输入框样式。
核心原理：盒阴影与背景图像的协同作用
要实现阴影颜色“透过”输入框可见的效果，我们需要结合两种CSS技术：
- `box-shadow`： 用于创建输入框外部的偏移阴影。这是我们视觉上看到的主体阴影部分。
- `background-image` (结合 `linear-gradient`)： 用于在输入框内部创建与外部阴影颜色一致的“填充”区域。通过精确控制其`background-position`，使其与外部阴影形成视觉上的连续性。
实现步骤与代码示例
我们将通过一个具体的输入框示例来演示如何实现这种效果。假设我们有以下HTML结构：
<input type="text" class="input-field" name="day" required placeholder="DD"> <input type="text" class="input-field" name="month" required placeholder="MM"> <input type="text" class="input-field" name="year" required placeholder="YYYY">
为了方便演示，我们使用一个通用的类名input-field。
1. 默认状态样式
首先，为输入框设置基本样式，包括尺寸、边框、字体颜色等。核心在于设置透明背景，并应用box-shadow和background-image。
立即学习“前端免费学习笔记（深入）”；
.input-field {
width: 176px;
height: 60px;
border: 2px solid #FFFFFF; /* 白色边框 */
background: rgba(0, 0, 0, 0); /* 关键：设置背景透明 */
/* 内部填充效果：使用linear-gradient创建纯色块 */
background-image: linear-gradient(#54B3A1, #54B3A1);
/* 内部填充的定位：偏移量 = box-shadow偏移量 - 边框宽度 */
background-position: 12px 12px;
background-repeat: no-repeat; /* 防止背景重复 */
/* 外部阴影效果 */
box-shadow: 14px 14px 0px 0px #54B3A1; /* 外部阴影，与内部填充颜色一致 */
margin-right: 40px;
color: white;
font-size: 18px;
font-family: futuraptbook; /* 假设的字体 */
text-align: center;
}解析：
- border: 2px solid #FFFFFF;：定义了输入框的白色边框。
- background: rgba(0, 0, 0, 0);：将输入框的背景设置为完全透明，这是让background-image可见的前提。
- background-image: linear-gradient(#54B3A1, #54B3A1);：利用linear-gradient生成一个纯色的背景图像。这里使用两次相同的颜色值，效果等同于一个纯色块。
- background-position: 12px 12px;：这是实现内部填充与外部阴影对齐的关键。box-shadow的水平和垂直偏移量是14px，而边框宽度是2px。因此，内部背景图像的起始位置需要从左上角向右和向下各偏移 14px - 2px = 12px，这样才能在视觉上与外部阴影对齐，并留出边框的空间。
- box-shadow: 14px 14px 0px 0px #54B3A1;：创建了一个向右和向下偏移14px的外部阴影，颜色与内部填充一致。
2. 焦点（`:focus`）状态处理
当输入框获得焦点时，通常需要改变其样式以提供视觉反馈。在这个示例中，我们希望在焦点状态下移除阴影和内部填充，并可能调整输入框的尺寸。
.input-field:focus {
box-shadow: 0px 0px 0px 0px black; /* 移除阴影 */
width: 218px; /* 宽度增加 */
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
background-image: linear-gradient(transparent, transparent); /* 移除内部填充 */
}解析：
- box-shadow: 0px 0px 0px 0px black;：将阴影的偏移量、模糊半径和扩散半径都设为0， effectively移除了阴影。
- background-image: linear-gradient(transparent, transparent);：将背景图像设置为透明渐变，从而移除内部填充效果。
- width, margin-right, margin-left, border-radius：这些属性的调整是为了在焦点状态下改变输入框的布局和外观，使其更突出。
3. 有效（`:valid`）状态处理
当输入框内容符合required属性或其他验证规则时，可以恢复或应用特定的样式。在这个例子中，我们假设在内容有效时，输入框恢复到带有阴影和内部填充的原始状态，但可能保持焦点状态下调整后的尺寸。
.input-field:valid {
box-shadow: 14px 14px 0px 0px #54B3A1; /* 恢复阴影 */
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;
}解析：
- box-shadow和background-image属性被恢复到默认状态的值，使得阴影和内部填充重新出现。
- width和margin等属性保持了在焦点状态下的值，这表明在有效且非焦点状态下，输入框可能保持较大的尺寸。
完整代码示例
为了更清晰地展示，我们将相关的CSS和HTML合并如下：
<!DOCTYPE html>
<html>
<head>
<title>输入框盒阴影与内部填充效果</title>
<style>
/* 假设的字体定义，实际项目中需引入字体文件 */
@font-face {
font-family: futuraptbook;
src: url(../fonts/futuraptbook.ttf); /* 请替换为实际路径 */
}
@font-face {
font-family: futuraptdemi;
src: url(../fonts/futuraptbook.ttf); /* 请替换为实际路径 */
}
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
font-family: sans-serif;
}
.container {
background: none;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.age-label {
font-size: 15px;
text-align: left;
line-height: 20px;
font-family: futuraptdemi;
color: white;
letter-spacing: 1.5px;
display: block;
margin-bottom: 5px;
}
.input-wrapper {
display: flex;
gap: 20px; /* 调整输入框之间的间距 */
margin-top: 10px;
justify-content: center;
}
.input-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* 通用输入框样式 */
.input-field {
width: 176px;
height: 60px;
border: 2px solid #FFFFFF;
background: rgba(0, 0, 0, 0); /* 关键：背景透明 */
background-image: linear-gradient(#54B3A1, #54B3A1); /* 内部填充色 */
background-position: 12px 12px; /* 内部填充偏移量 */
background-repeat: no-repeat;
box-shadow: 14px 14px 0px 0px #54B3A1; /* 外部阴影 */
color: white;
font-size: 18px;
font-family: futuraptbook;
text-align: center;
transition: all 0.3s ease; /* 添加过渡效果 */
}
/* 焦点状态 */
.input-field:focus {
box-shadow: 0px 0px 0px 0px black; /* 移除阴影 */
width: 218px; /* 宽度增加 */
margin-right: -1px; /* 微调位置 */
margin-left: -1px; /* 微调位置 */
border-radius: 0px;
background-image: linear-gradient(transparent, transparent); /* 移除内部填充 */
outline: none; /* 移除默认焦点轮廓 */
}
/* 有效状态 (当输入框内容有效时) */
.input-field:valid {
box-shadow: 14px 14px 0px 0px #54B3A1; /* 恢复阴影 */
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;
}
/* 为了演示方便，添加一个按钮 */
.btn {
border-radius: 27px;
background: #D94016;
width: 300px;
height: 50px;
margin-top: 50px;
color: white;
font-size: 18px;
font-family: futuraptdemi;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: white; font-family: futuraptdemi;">WHEN WERE YOU BORN</h1>
<div class="input-wrapper">
<div class="input-group">
<label class="age-label" for="day">DAY (DD)</label>
<input type="text" class="input-field" id="day" name="day" required placeholder="DD">
</div>
<div class="input-group">
<label class="age-label" for="month">MONTH (MM)</label>
<input type="text" class="input-field" id="month" name="month" required placeholder="MM">
</div>
<div class="input-group">
<label class="age-label" for="year">YEAR (YYYY)</label>
<input type="text" class="input-field" id="year" name="year" required placeholder="YYYY">
</div>
</div>
<button class="btn">I AM OF LEGAL DRINKING AGE</button>
</div>
</body>
</html>注意事项与最佳实践
- 偏移量计算的精确性： background-position的偏移量必须精确地与box-shadow的偏移量以及border的宽度相协调。公式通常是：background-position偏移量 = box-shadow偏移量 - border宽度。任何一个值变化，都可能需要重新计算。
- 颜色一致性： 确保box-shadow的颜色与background-image（linear-gradient）中使用的颜色保持一致，以实现无缝的融合效果。
- 选择器优化： 示例中使用了.input-field作为通用类名。在实际项目中，如果输入框位于特定的父元素内，可以使用更具体的选择器（如td .input-field或#myForm .input-field）来提高样式规则的优先级和可维护性。原始问题中的td input[class^='input']是一个更具弹性的选择器，它匹配所有类名以“input”开头的input元素，这在处理多个相似但略有不同类名的元素时非常有用。
- 过渡效果： 为了使焦点和有效状态之间的切换更加平滑，可以为相关CSS属性（如width, box-shadow, background-image等）添加transition属性。
- 可访问性： 确保这种视觉效果不会影响屏幕阅读器用户对输入框状态的理解。例如，通过aria-label或aria-describedby提供额外的上下文信息。
- 兼容性： linear-gradient和box-shadow在现代浏览器中都有良好的支持。对于旧版浏览器，可能需要添加供应商前缀（如-webkit-），但通常现在已不必要。
总结
通过巧妙地结合box-shadow和background-image（使用linear-gradient创建纯色块），我们可以突破box-shadow仅限于元素外部的限制，实现一种独特的、带有内部填充感的阴影效果。这种技术为UI设计师和前端开发者提供了更丰富的视觉表现力，能够创建更具吸引力和交互性的输入框组件。理解background-position与box-shadow偏移量及边框宽度的关系，是掌握此技术的关键。
