做了个渐变边框的input输入框，领导和客户很满意！

需求简介

前几天需求评审的时候，产品说客户希望输入框能够好看一点。由于我们UI框架用的是Elemnt Plus，input输入框的样式也比较中规中矩，所以我们组长准备拒绝这个需求

但是，喜欢花里胡哨的我立马接下了这个需求！我自信的告诉组长，放着我来，包满意！

经过一番折腾，我通过 CSS 的技巧实现了一个带有渐变边框的 Input 输入框，而且当鼠标悬浮在上面时，边框颜色要更加炫酷并加深渐变效果。

最后，领导和客户对最后的效果都非常满意~我也成功获得了老板给我画的大饼，很开心！

下面就来分享我的实现过程和代码方案，满足类似需求的同学可以直接拿去用！

实现思路

实现渐变边框的原理其实很简单，首先实现一个渐变的背景作为底板，然后在这个底板上加上一个纯色背景就好了。

当然，我们在实际写代码的时候，不用专门写两个div来这么做，利用css的 background-clip 就可以实现上面的效果。

background-clip 属性详解

background-clip 是一个用于控制背景（background）绘制范围的 CSS 属性。它决定了背景是绘制在 内容区域 、内边距区域 、还是 边框区域。

js 复制代码

background-clip: border-box | padding-box | content-box | text;

代码实现

背景渐变

js 复制代码

<template>
 <div class="input-container">
  <input type="text" placeholder="请输入内容" class="gradient-input" />
</div>
</template>

<script setup>
</script>

<style>
/* 输入框容器 */
.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #f4f4f9;
}

/* 渐变边框输入框 */
.gradient-input {
  width: 400px;
  height: 40px;
  padding: 5px 12px;
  font-size: 16px;
  color: #333;
  outline: none;
  /* 渐变边框 */
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;
  border-radius: 20px;
}

/* Placeholder 样式 */
.gradient-input::placeholder {
  color: #aaa;
  font-style: italic;
}

</style>

通过上面的css方法，我们成功实现了一个带有渐变效果边框的 Input 输入框，它的核心代码是

css 复制代码

background: linear-gradient(white, white) padding-box, 
            linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;

padding-box：限制背景在内容区域显示，防止覆盖输入框内容。

border-box：渐变背景会显示在边框位置，形成渐变边框效果。

这段代码分为两层背景：

第一层背景 ：
linear-gradient(white, white) 是一个纯白色的线性渐变，用于覆盖输入框的内容区域（padding-box）。
第二层背景 ：
linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) 是一个多色的渐变，用于显示在输入框的边框位置（border-box）。

背景叠加后，最终效果是：内层内容是白色背景，边框区域显示渐变颜色。

Hover 效果

借助上面的思路，我们在添加一些hover后css样式，通过 :hover 状态改变渐变的颜色和 box-shadow 的炫光效果：

js 复制代码

/* Hover 状态 */
.gradient-input:hover {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 5px rgba(255, 0, 118, 0.5), 0 0 20px rgba(30, 174, 255, 0.5);
}

过渡似乎有点生硬，没关系，加个过渡样式

arduino 复制代码

/* 渐变边框输入框 */
.gradient-input {
  // .....

  /* 平滑过渡 */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

非常好看流畅~

激活样式

最后，我们再添加一个激活的Focus 状态：当用户聚焦输入框时，渐变变得更加灵动，加入额外的光晕。

css 复制代码

/* Focus 状态 */
.gradient-input:focus {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 15px rgba(255, 0, 118, 0.7), 0 0 25px rgba(30, 174, 255, 0.7);
  color: #000; /* 聚焦时文本颜色 */
}

现在，我们就实现了一个渐变边框的输入框，是不是非常好看？

完整代码

js 复制代码

<template>
 <div class="input-container">
  <input type="text" placeholder="请输入内容" class="gradient-input" />
</div>
</template>

<style>
/* 输入框容器 */
.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #f4f4f9;
}

/* 渐变边框输入框 */
.gradient-input {
  width: 400px;
  height: 40px;
  padding: 5px 12px;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
  color: #333;
  outline: none;

  /* 渐变边框 */
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;
  border-radius: 20px;

  /* 平滑过渡 */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* 

/* Hover 状态 */
.gradient-input:hover {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 5px rgba(255, 0, 118, 0.5), 0 0 20px rgba(30, 174, 255, 0.5);
}

/* Focus 状态 */
.gradient-input:focus {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 15px rgba(255, 0, 118, 0.7), 0 0 25px rgba(30, 174, 255, 0.7);
  color: #000; /* 聚焦时文本颜色 */
}

/* Placeholder 样式 */
.gradient-input::placeholder {
  color: #aaa;
  font-style: italic;
}

</style>

总结

通过上述方法，我们成功实现了一个带有渐变效果边框的 Input 输入框，并且在 Hover 和 Focus 状态下增强了炫彩效果。

大家可以根据自己的需求调整渐变的方向、颜色或动画效果，让你的输入框与众不同！