如何用SVG画一个特定边框

▐  问题一：CSS 如何实现边框相连
这倒不难，我们需要：

给 tab元素 设置border-right: none，同时border-top-right-radius: 0、border-bottom-right-radius: 0

再给 tab元素 一个向右的偏移，偏移量 = 边框宽度

最后让 tab元素 z-Index 高于内容区，并给 tab元素 加上背景色（背景色需要和页面背景色一致）

缺陷
这时候缺点已经来了，我们通过加背景色遮盖边框实现边框相连，不可避免地遮盖了页面内容，如果页面背景比较复杂，我们会很难处理。这个方案并不足够通用，但好在我们的场景页面背景纯白，先忍了。

▐  问题二：CSS 如何实现内凹圆角
也还行，我们需要：

新增两个元素，宽高和border-radius值相等

元素1 设置背景色，先覆盖在边框相连处

元素2 设置border-bottom-right-radius: 50%，同时border和tab元素保持一致

缺陷
其实和问题一一样，我们又使用了背景色对边框进行遮盖，但先忍了，实现要紧。

▐  问题三：CSS 如何实现滚动离屏过渡
这个问题用css就比较难实现了，它可以被拆解成两个子问题：

tab元素的顶边在离屏过程中需要固定，border 框选区域高度不断变小

圆角如何平滑过渡到直线
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/Taobaojishu/article/details/136311730