1. 实现目标与应用场景
需求要点
在表单 UI 设计中，顶部圆角需始终保留，而底部圆角需要在某些状态下动态消失，以突出输入区的焦点或状态变化。
通过纯 CSS 的方式实现动态变化的圆角，可以避免额外的 DOM 与事件监听，同时提升性能与可维护性。
结构要点
通常采用一个包裹容器 input-wrap 和一个实际的 input 元素，边角控制在 input 上完成。
为了实现视觉连贯，所有圆角的初始值应设为一致，并通过状态触发对底部圆角应用不同取值。
2. 实现方案一：通过 border-bottom-radius 动态变化
基础结构与样式
核心思路是将 的底部圆角在聚焦时逐步变为0，保证 顶部圆角不变，从而实现“底部圆角消失”的效果。
实现时，为底部圆角单独设置边界半径，并通过 CSS 过渡实现平滑过渡。
/* CSS 示例：基础样式 + focus 触发 bottom radius 变为 0 */
.input-wrap { display: inline-block; }
.input-wrap .input {border: 1px solid #ccc;border-top-left-radius: 12px;border-top-right-radius: 12px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding: 10px 12px;transition: border-bottom-left-radius 240ms ease, border-bottom-right-radius 240ms ease;
}
.input-wrap:focus-within .input {border-bottom-left-radius: 0;border-bottom-right-radius: 0;
}
通过 focus-within 选择器可以确保无论是直接聚焦输入框还是聚焦父容器，底部圆角都能动态消失。
兼容性与注意点
主流浏览器均支持 transition 与单独的 radius 属性，因此此方案在现代浏览器中具有良好兼容性。
对于旧版浏览器，建议使用简单的 hover/focus 触发，或提供备用样式以保持可用性。
3. 实现方案二：采用 :focus-within 与过渡实现平滑动画
高级做法与容错
与方案一相比，方案二更强调平滑的视觉过渡，并且通过容器状态传递触发点，降低直接对 input 的依赖。
通过将输入框放在一个带有背景和阴影的容器中，内部样式保持顶部圆角，底部圆角随状态变化。
/* 另一种实现，结合容器和伪元素实现边角效果 */
.input-wrap {position: relative;display: inline-block;border-radius: 12px;overflow: hidden;transition: box-shadow 200ms ease;
}
.input-wrap .input {width: 100%;border: none;outline: none;padding: 10px 12px;border-top-left-radius: 12px;border-top-right-radius: 12px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;/* 额外样式用于视觉一致性 */background: #fff;
}
.input-wrap:focus-within {/* 触发伪元素遮罩或直接改变底部圆角 */--bottom-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;
}
该方案的关键点在于利用 容器的 focus-within 与变量控制，实现可维护的状态控制。
实现建议与实验
在实际项目中，可以用 自定义属性 来统一管理半径，便于全站风格统一。
测试要点包括在 键盘导航、鼠标悬停、屏幕阅读器模式等状态下的圆角表现。
4. 进阶技巧与替代方案
伪元素与遮罩实现底部圆角
除了直接修改 input 的圆角，还可以使用 ::before、::after 伪元素在底部绘制圆角效果，配合 mask/clip-path 可实现更灵活的形状控制。
通过将伪元素放在容器之上，底部边角的消失不影响顶部圆角，并可实现复杂的视觉效果。
/* 伪元素实现底部圆角消失，保持顶部圆角 */
.input-wrap {position: relative;border-radius: 12px;overflow: hidden;
}
.input-wrap::after {content: '';position: absolute;left: 0; right: 0; bottom: 0;height: 12px;background: #fff;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;transition: height 240ms ease;
}
.input-wrap:focus-within::after {height: 0; /* 底部圆角动画的替代实现 */border-bottom-left-radius: 0;border-bottom-right-radius: 0;
}
此处使用 伪元素和遮罩的组合，可以在更复杂的设计中实现"底部圆角动态消失"的视觉效果。
5. 实战整合示例：完整代码片段
HTML 结构
以下结构非常适合在实际项目中复用，将输入框放在 input-wrap 容器中，便于统一控制样式。
通过清晰的分层，分离语义与样式，提高可维护性与重用性。
<div class="input-wrap"><input class="input" type="text" placeholder="请输入内容">
</div>CSS 样式整合
下面的 CSS 提供了一个完整的实现模板，顶部圆角固定，底部圆角在聚焦时消失，并带有平滑过渡。
要点包括：自定义属性、focus-within 触发、逐步过渡，以及对输入框的基础美化。
:root {--radius: 12px;
}
.input-wrap {display: inline-block;position: relative;
}
.input {width: 260px;padding: 12px 14px;border: 1px solid #ccc;border-top-left-radius: var(--radius);border-top-right-radius: var(--radius);border-bottom-left-radius: var(--radius);border-bottom-right-radius: var(--radius);transition: border-bottom-left-radius 200ms ease, border-bottom-right-radius 200ms ease;
}
.input-wrap:focus-within .input {border-bottom-left-radius: 0;border-bottom-right-radius: 0;
}
