这种元素模块交界的地方的border-radius效果怎么做？

解答思路

纯 CSS 选择器（如 :first-child、:last-child、相邻选择器等）只能基于 DOM 结构中固定的「前后」「子级」关系去匹配元素，难以覆盖动态变化或更复杂的交界场景；更通用的做法是用 JS 判断实际的交界条件后，动态给相邻的两个元素分别添加特定的 class，再通过这些 class 来控制对应的 border-radius 样式。

详细说明

CSS 本身的能力局限在于：它只能根据文档结构中静态的层级/顺序关系来选中元素（比如某个元素的下一个兄弟节点、某个容器的第一个/最后一个子元素），无法根据「运行时的实际内容/状态」来判断两个模块是否真的在视觉上相邻、是否需要做圆角过渡处理。

而通过 JS 判断（比如根据数据条件、渲染结果、或者实际计算出的位置关系）之后动态添加 class，可以做到：

• 精确控制到底哪两个具体的元素是「交界」的一对，而不依赖它们在 DOM 树中固定的前后位置。
• 分别为交界处的上方元素和下方元素添加不同的 class（例如 .corner-bottom 和 .corner-top），再用 CSS 分别定义这两个 class 对应的 border-radius 取值，实现视觉上「你的下边角凹进去，正好对应我的上边角凸出来」的拼接效果。

具体交互效果可以参考回答中给出的在线 Demo（http://jsrun.net/KBLKp/edit）。

小结

处理动态、复杂的模块交界圆角效果，单纯 CSS 选择器往往力不从心，更稳妥的方案是用 JS 判断交界关系后动态添加 class，再交由 CSS 完成具体的圆角样式呈现。