CSS技巧：实现输入框内部可见的盒阴影与外部阴影融合效果-html教程-PHP中文网

CSS技巧：实现输入框内部可见的盒阴影与外部阴影融合效果

在网页设计中，我们经常需要为输入框添加视觉效果以提升用户体验。`box-shadow`是实现元素阴影效果的常用属性，但它通常只在元素的外部边缘生效。有时，设计需求可能要求阴影的颜色仿佛“渗透”到输入框内部，与输入框的背景融为一体，形成一种带有偏移感的内部填充效果。本文将深入探讨如何通过css的巧妙组合，实现这种既有外部阴影又有内部“填充”的独特输入框样式。

核心原理：盒阴影与背景图像的协同作用

要实现阴影颜色“透过”输入框可见的效果，我们需要结合两种CSS技术：

`box-shadow`： 用于创建输入框外部的偏移阴影。这是我们视觉上看到的主体阴影部分。
`background-image` (结合 `linear-gradient`)： 用于在输入框内部创建与外部阴影颜色一致的“填充”区域。通过精确控制其`background-position`，使其与外部阴影形成视觉上的连续性。

关键在于，我们需要将输入框自身的默认背景设置为透明（`background: transparent;` 或 `rgba(0,0,0,0)`），这样才能让通过`background-image`创建的内部填充显现出来。

实现步骤与代码示例

我们将通过一个具体的输入框示例来演示如何实现这种效果。假设我们有以下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`）状态处理

当输入框获得焦点时，通常需要改变其样式以提供视觉反馈。在这个示例中，我们希望在焦点状态下移除阴影和内部填充，并可能调整输入框的尺寸。

影谱

汉语电影AI辅助创作平台

查看详情

.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偏移量及边框宽度的关系，是掌握此技术的关键。

以上就是CSS技巧：实现输入框内部可见的盒阴影与外部阴影融合效果的详细内容，更多请关注php中文网其它相关文章！