谁用谁知道，拿走不谢!input框钻石切割边框+渐变 蓝色光晕效果

在Vue3后台管理系统选型的过程中，发现了Vexip UI这个vue3 组件库，与element plus比不算很知名，但是效果非常不错。

尤其是Input文本框等选中后的效果，看了后直呼惊艳。

瞬间欲罢不能，一定要在自己的工程中使用该效果。

有两种方式，第一种是直接使用Vexip UI，也很简单；第二种是在现有的基础上模仿，复刻这种效果。

由于我的前端工程是AI设计生成的，直接输出源码，源码默认是vue3+tailwind CSS。一个个把tailwind改成Vexip挺费劲，另外就因为一个效果引入Vexip包也不值当。

于是开始了模仿之旅，画虎不成反类犬，刻鹄不成尚类鹜。在AI的助力下，经过1天多的折腾，总算扒出了对应的效果。动效就不演示了。

先看AI 生成的默认的tailwind css效果

复刻后的效果，边框如钻石切割，带光晕，带渐变，带动效。个人感觉比Vexip UI更符合我的要求一点。

拿走不谢，Tailwind CSS 3.4.17 版本，对应的tailwind css class ：

<input

v-model="searchForm.name"

type="text"

placeholder="请输入物品名称"

class="w-full py-2 text-center border border-gray-300 rounded outline-none

transition-all duration-300 ease-in-out

hover:border-blue-400 focus:border-blue-500

focus:ring-3 focus:ring-blue-500/50

focus:shadow-[0_0_9px_rgba(66,153,215,0.5)]

focus:z-10 text-sm"

/>

另外，此class效果也适用select等其他组件。