本文探讨了在Web开发中，如何实现一个常见的UI交互效果：当元素获得焦点时，其底部圆角消失而顶部圆角保持不变。核心解决方案在于为容器设置固定高度，并明确定义顶部和底部的圆角半径为该高度的一半。通过这种方式，即使在焦点状态下移除底部圆角，顶部圆角的形状也能独立且稳定地维持。
实现焦点时底部圆角消失，顶部圆角保持不变的技巧
在现代Web界面设计中，一些精妙的交互效果能够显著提升用户体验，例如Google搜索框在获得焦点时，其底部圆角会“拉直”，而顶部圆角则保持不变。这种效果的实现看似简单，但在实践中，如果处理不当，可能会导致顶部圆角也随之变形。本教程将详细介绍如何利用CSS（特别是结合Tailwind CSS）精确地实现这一效果。
问题分析：为什么常规方法会失败？
许多开发者在尝试实现此类效果时，可能会首先想到为容器设置一个统一的圆角，然后在获得焦点时移除底部圆角。例如，使用Tailwind CSS可能会写出如下代码：
<div class="rounded-[24px] bg-white px-3 focus-within:rounded-b-none">
<input type="text" class="w-full outline-none" />
</div>这段代码的意图是先给整个div一个24px的圆角，然后在div内部的input获得焦点时（通过focus-within），移除底部的圆角。然而，问题在于当rounded-[24px]被应用时，它实际上是为所有四个角设置了24px的圆角。当focus-within:rounded-b-none被触发时，它会尝试将底部圆角设为0，但这可能会影响到整体的圆角计算逻辑，导致顶部圆角也发生意料之外的形变，失去了预期的半圆形或平滑过渡效果。
根本原因在于，当一个元素同时拥有统一的border-radius和一个特定的border-bottom-left-radius或border-bottom-right-radius属性时，浏览器在计算最终渲染效果时可能会出现冲突或不一致。为了确保顶部圆角的独立性，我们需要一种更精确的控制方式。
核心解决方案：固定高度与独立圆角定义
要完美实现这一效果，关键在于以下两点：
- 为容器设置一个固定的高度。
- 明确且独立地定义顶部和底部的圆角半径，并且这个半径值应该等于容器高度的一半。
通过将圆角半径设置为容器高度的一半，我们可以确保获得一个完美的半圆形（或半椭圆形）圆角。当底部圆角被移除时，顶部圆角由于其独立且明确的定义，将不受影响。
示例代码与详细解释
下面是使用Tailwind CSS实现这一效果的完整代码示例：
<div class="h-screen w-full bg-slate-500 p-8 flex justify-center items-start">
<!-- 这是包含搜索框的容器 -->
<div class="h-8 rounded-t-[1rem] rounded-b-[1rem] bg-white flex items-center px-3 focus-within:rounded-b-none transition-all duration-200">
<input type="text" class="w-full outline-none" placeholder="搜索..." />
</div>
</div>代码解析：
-
外部容器 (<div class="h-screen w-full bg-slate-500 p-8 flex justify-center items-start">):
- 这仅仅是一个用于演示的背景容器，方便观察效果。h-screen和w-full使其占据整个视口，bg-slate-500设置背景色，p-8添加内边距。flex justify-center items-start用于将内部的搜索框居中显示在顶部。
-
内部搜索框容器 (<div class="h-8 rounded-t-[1rem] rounded-b-[1rem] bg-white flex items-center px-3 focus-within:rounded-b-none transition-all duration-200">):
- h-8: 这是关键之一。在Tailwind CSS中，h-8等同于height: 2rem;（即32px）。为容器设置一个固定的高度是确保圆角行为可预测的基础。
- rounded-t-[1rem]: 这明确地为顶部设置了border-top-left-radius: 1rem;和border-top-right-radius: 1rem;。由于1rem是h-8（2rem）的一半，这确保了顶部圆角是一个完美的半圆形。
- rounded-b-[1rem]: 同样，这为底部设置了border-bottom-left-radius: 1rem;和border-bottom-right-radius: 1rem;。
- bg-white: 设置背景色为白色。
- flex items-center: 使得内部的input元素在垂直方向上居中对齐，提升美观度。
- px-3: 为输入框提供左右内边距。
- focus-within:rounded-b-none: 这是实现交互效果的核心。当此div内部的任何元素（在这里是input）获得焦点时，rounded-b-none（等同于border-bottom-left-radius: 0; border-bottom-right-radius: 0;）将被应用，从而移除底部圆角。
- transition-all duration-220: 添加一个平滑的过渡效果，使圆角变化更加自然。
-
输入框 (<input type="text" class="w-full outline-none" placeholder="搜索..." />):
- w-full: 使输入框占据其父容器的全部宽度。
- outline-none: 移除输入框获得焦点时的默认轮廓，以便更好地控制样式。
- placeholder="搜索...": 提供一个占位符文本。
工作原理
当div的高度固定为2rem时，我们将顶部和底部的圆角半径都精确设置为1rem。这意味着顶部圆角被定义为具有1rem半径的独立弧线，底部圆角也是如此。当focus-within:rounded-b-none生效时，它只将底部圆角的半径设置为0，而顶部圆角的定义rounded-t-[1rem]依然有效且不受影响。这种明确的、独立的圆角定义方式，是确保顶部圆角形状在交互过程中保持不变的关键。
注意事项与扩展
高度与圆角半径的匹配: 确保容器的高度与圆角半径之间存在2:1的精确关系（高度是半径的两倍），这是实现完美半圆形圆角的关键。
-
通用CSS实现: 即使不使用Tailwind CSS，原理也是相同的。你可以使用原生的CSS属性来实现：
.search-container { height: 32px; /* 2rem */ border-top-left-radius: 16px; /* 1rem */ border-top-right-radius: 16px; /* 1rem */ border-bottom-left-radius: 16px; /* 1rem */ border-bottom-right-radius: 16px; /* 1rem */ /* 其他样式 */ } .search-container:focus-within { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } 过渡效果: 为了更平滑的视觉体验，建议添加CSS transition属性，使圆角变化有一个动画过程。
可访问性: 确保在移除底部圆角时，元素的其他视觉提示（如边框颜色、阴影等）仍然能清晰地表明其焦点状态，以提高可访问性。
总结
通过为容器设置固定高度，并精确地将顶部和底部的圆角半径分别定义为该高度的一半，我们可以优雅地实现焦点时底部圆角消失而顶部圆角保持不变的交互效果。这种方法确保了各部分样式的独立性，避免了不必要的副作用，从而创建出更稳定、更专业的UI体验。
