overflow: hidden 无法隐藏边框本身，因 border 属于盒模型固有部分而非溢出内容；可行方案是用父容器裁剪、伪元素模拟或 border-image 配合 clip-path。
overflow: hidden 不能直接隐藏边框本身
边框（border）是元素盒模型的固有部分，不属于内容溢出范畴。设置 overflow: hidden 只能裁剪内容（如子元素、背景图像、文字），但对 border 本身完全无效——它始终会完整渲染在元素边界上。
想让“边框看起来被裁掉”，得换思路：用父容器遮盖
真正可行的做法是：把带边框的元素嵌套进一个更小的父容器，并让父容器设置 overflow: hidden，同时控制子元素的定位或尺寸，使其边框超出父容器范围后被视觉裁剪。
- 父容器需设明确宽高 +
overflow: hidden - 子元素可设
position: relative或absolute，并用负margin/top/left等方式“撑出”边框 - 注意：边框实际仍存在，只是被父容器的裁剪区域挡住了
伪元素 + overflow 配合可模拟“局部边框”效果
如果目标是只显示某几边的边框（比如只留顶部和右侧），用 ::before 或 ::after 绘制线条更可控，且能自由裁剪：
- 伪元素设
position: absolute，尺寸和位置按需调整 - 父容器设
overflow: hidden，就能精准截断伪元素线条 - 避免依赖真实
border的不可控性
border-image + 裁剪路径是高级但兼容性受限的方案
用 border-image 配合 clip-path 可实现更精细的边框形状控制，但要注意：
立即学习 “ 前端免费学习笔记（深入）”；
-
clip-path对border的裁剪支持因 浏览器 而异（Chrome 较好，Safari 旧版本可能不生效） -
border-image必须配合border-style（如solid）才生效，且图源需适配裁剪区域 - 这不是“隐藏溢出”，而是重定义边框的绘制区域，学习成本和调试成本较高
日常开发中，优先用父容器遮盖法；需要动态控制时，改用 SVG 或 Canvas 绘制边框更可靠。
