需求简介
前几天需求评审的时候，产品说客户希望输入框能够好看一点。由于我们UI框架用的是Elemnt Plus，input输入框的样式也比较中规中矩，所以我们组长准备拒绝这个需求
但是，喜欢花里胡哨的我立马接下了这个需求！我自信的告诉组长，放着我来，包满意！
经过一番折腾，我通过 CSS 的技巧实现了一个带有渐变边框的 Input 输入框，而且当鼠标悬浮在上面时，边框颜色要更加炫酷并加深渐变效果。
最后，领导和客户对最后的效果都非常满意~我也成功获得了老板给我画的大饼，很开心！
下面就来分享我的实现过程和代码方案，满足类似需求的同学可以直接拿去用！
实现思路
实现渐变边框的原理其实很简单，首先实现一个渐变的背景作为底板，然后在这个底板上加上一个纯色背景就好了。
当然，我们在实际写代码的时候，不用专门写两个div来这么做，利用css的 background-clip 就可以实现上面的效果。
background-clip属性详解
background-clip是一个用于控制背景（background）绘制范围的 CSS 属性。它决定了背景是绘制在 内容区域、内边距区域、还是 边框区域。background-clip: border-box | padding-box | content-box | text;
代码实现
背景渐变
<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 输入框，它的核心代码是
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 的炫光效果：
/* 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);
}
过渡似乎有点生硬，没关系，加个过渡样式
/* 渐变边框输入框 */
.gradient-input {
// .....
/* 平滑过渡 */
transition: background 0.3s ease, box-shadow 0.3s ease;
}
非常好看流畅~
激活样式
最后，我们再添加一个激活的Focus 状态：当用户聚焦输入框时，渐变变得更加灵动，加入额外的光晕。
/* 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; /* 聚焦时文本颜色 */
}
现在，我们就实现了一个渐变边框的输入框，是不是非常好看？
完整代码
<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 状态下增强了炫彩效果。
大家可以根据自己的需求调整渐变的方向、颜色或动画效果，让你的输入框与众不同！
