需求简介 前几天需求评审的时候，产品说客户希望输入框能够好看一点。由于我们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> <顺便帮推吆喝一句> 民族企业核心部门年底前的一波岗，base武汉、深圳、东莞、西安、上海、北京、苏州等地。前、后端or测试>>>直通机会 学历要求放宽（本科包含双非学院），机考分数设低（150分也可）至年末。 语言：Java、Js、测试、python、ios、安卓、C++（客户端）等 总结 通过上述方法，我们成功实现了一个带有渐变效果边框的 Input 输入框，并且在 Hover 和 Focus 状态下增强了炫彩效果。 大家可以根据自己的需求调整渐变的方向、颜色或动画效果，让你的输入框与众不同！ 作者：快乐就是哈哈哈
悬赏已过期
后悬赏过期
