做了个渐变边框的input输入框，领导和客户很满意！ （??金石瓜分计划强势上线，速戳上图了解详情??）需求简介前几天需求评审的时候，产品说客户希望输入框能够好看一点。由于我们 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 状态下增强了炫彩效果。 ?大家可以根据自己的需求调整渐变的方向、颜色或动画效果，让你的输入框与众不同！ ?AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文