border-style 实际常用值为 none、solid、dashed、dotted；double 及 3d 类（groove、ridge 等）因渲染差异大、语义模糊，线上基本不用；hidden 仅用于表格边框冲突，对普通元素无效。
border-style 能设哪些值，哪些值实际有用
border-style 本身只管“线型”，不管粗细或颜色。它接受的值里，none、solid、dashed、dotted 是现代项目里真正会用到的；double、groove、ridge、inset、outset 理论上存在，但浏览器渲染差异大，且语义模糊，基本没人在线上环境用。
常见错误是写成 border-style: hidden——这其实不是边框样式，而是用于表格边框冲突时的隐藏策略，对普通 div 没效果。
-
none：彻底移除边框（注意：它不等价于border-width: 0，前者会重置整个边框盒模型计算） -
solid：最常用，线条连续无间断 -
dashed：虚线，但各浏览器默认 dash 长度和间隔不一致，别依赖像素级对齐 -
dotted：圆点线，Safari 渲染为小方点，Chrome/Firefox 才接近圆形，移动端更不可靠
单独控制某一边的 border-style 怎么写
不能只写 border-top-style: solid 就生效——前提是该边已有宽度。如果 border-top-width 是 0 或没声明，再设 border-top-style 也看不见。
实操建议优先用简写：border-top: 2px solid #333，它同时设宽、型、色，逻辑清晰，不易遗漏。
- 单独设样式前，确认对应方向的
border-width不为0（哪怕只是1px） - 避免混用简写和独立属性，比如先写
border: 1px solid #000，再写border-bottom-style: dashed——后者会被覆盖或引发意外重绘 - 想让左右边无边框、上下有虚线？直接写
border: 1px dashed #000; border-left: none; border-right: none
border-style 和 box-sizing 的隐性关系
当 box-sizing: border-box 时，border-style 改变不会影响元素尺寸计算方式，但它会影响「是否占空间」：比如从 solid 改成 none，边框区域直接消失，父容器可能重排。
更隐蔽的问题是 border-style: none + border-color 同时存在时：颜色值仍被解析，但不渲染；若之后 JS 动态改回 solid，颜色会立刻生效——这点常被忽略，导致动画或状态切换时颜色“跳一下”。
- 不要以为
border-style: none就等于“完全清空边框”，它的 color 和 width 依然在 computed style 里保留 - 需要彻底重置，请用
border: none（等价于border: 0），它会清掉 width、style、color 三者 - 在 flex 或 grid 容器中，
border-style变化可能触发子项的 min-width/min-height 重新评估，尤其当边框带圆角时
IE8–IE11 下 border-style 的兼容陷阱
IE8 只支持 solid、dashed、dotted、double、none；groove 等 3D 效果值会被忽略，但不会报错。更麻烦的是，IE8–IE9 对 border-radius + border-style 组合的支持极差：圆角遇上 dashed 或 dotted，边框会断裂或消失。
- 如果项目还要兼容 IE8–IE9，别用
dashed或dotted配border-radius - IE8 不识别
border-image，但如果你用了，它会 fallback 到border-style，此时务必确保 fallback 样式可用 - 用 Autoprefixer 无法修复
border-style的兼容问题，它只处理 vendor prefix，这类行为差异得靠条件 CSS 或 JS 检测
overflow 值，都可能让它看起来“没生效”。调的时候别只盯着 border-style 这一行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
