为什么我的使用顺风的边界半径过渡不适用？

Question

到目前为止，我有一个带有超级简单搜索字段的顺风项目。当选择此搜索字段时，我希望减小边框半径（使其更像正方形），应用颜色和其他一些小东西。这种过渡似乎适用于除边界半径之外的所有内容。

\n

我的标记如下所示：

\n

<input\n    type="text" \n    className="transition-border duration-500 rounded-full bg-secondary-neutral pl-4 pr-14 py-2 outline-0 focus:border focus:border-accent-neutral focus:rounded-sm focus:bg-white focus:shadow-primary-extra-light focus:shadow-md text-sm text-ellipsis w-full max-w-sm"\n    placeholder="S\xc3\xb8k etter produkter, merker og mer"\n/>\n

\n

我还将其添加到我的 tailwind 配置中以获取边框过渡：

\n

transitionProperty: {\n    'border': 'border,border-radius,box-shadow,background-color',\n},\n

\n

输入字段的相关生成的 css 如下所示：

\n

.duration-500 {\n    transition-duration: 500ms;\n}\n.transition-border {\n    transition-property: border,border-radius,box-shadow,background-color;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n

\n

为了在边界半径上获得动画，我还缺少什么？

\n

Answer 1

这里提供了您问题的答案：-

\n

<input\ntype="text" \nclass="transition-border duration-500 rounded-full bg-secondary-neutral pl-4 pr-14 py-2 outline-0 focus:border focus:border-accent-neutral focus:rounded-sm focus:bg-white focus:shadow-primary-extra-light focus:shadow-md text-sm text-ellipsis w-full max-w-sm card"\nplaceholder="S\xc3\xb8k etter produkter, merker og mer" />\n\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\n.card {\n  @apply relative flex items-center justify-center w-80 shadow- \n  [0_10px_20px_rgba(0,0,0,0.2)] overflow-hidden transition-all duration- \n  [0.5s] ease-[cubic-bezier(0.23,1,0.320,1)]  rounded-[10px] border-2                                     \n  border-solid border-primary-light hover:shadow- \n  [0_0_20px_rgba(9,117,241,0.8)] hover:border-secondary-light dark:bg-white;\n  background: #0000;\n}\n

\n