在网页设计中，我们经常需要为输入框添加视觉效果以提升用户体验。`box-shadow`是实现元素阴影效果的常用属性，但它通常只在元素的外部边缘生效。有时，设计需求可能要求阴影的颜色仿佛“渗透”到输入框内部，与输入框的背景融为一体，形成一种带有偏移感的内部填充效果。本文将深入探讨如何通过css的巧妙组合，实现这种既有外部阴影又有内部“填充”的独特输入框样式。
核心原理：盒阴影与背景图像的协同作用
要实现阴影颜色“透过”输入框可见的效果，我们需要结合两种CSS技术：
`box-shadow`： 用于创建输入框外部的偏移阴影。这是我们视觉上看到的主体阴影部分。`background-image` (结合 `linear-gradient`)： 用于在输入框内部创建与外部阴影颜色一致的“填充”区域。通过精确控制其`background-position`，使其与外部阴影形成视觉上的连续性。关键在于，我们需要将输入框自身的默认背景设置为透明（`background: transparent;` 或 `rgba(0,0,0,0)`），这样才能让通过`background-image`创建的内部填充显现出来。
实现步骤与代码示例
我们将通过一个具体的输入框示例来演示如何实现这种效果。假设我们有以下HTML结构：
为了方便演示，我们使用一个通用的类名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合并如下：
输入框盒阴影与内部填充效果 /* 假设的字体定义，实际项目中需引入字体文件 */ @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; }WHEN WERE YOU BORN
注意事项与最佳实践
偏移量计算的精确性： 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偏移量及边框宽度的关系，是掌握此技术的关键。
以上就是CSS技巧：实现输入框内部可见的盒阴影与外部阴影融合效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586238.html
微信扫一扫 
支付宝扫一扫 
