border是唯一真正控制div边框的属性，必须包含宽度、样式、颜色三要素且顺序固定为border: ；缺一不可，尤其border-style不能省；box-sizing: border-box可解决边框导致宽度变大的问题。
div加边框用border属性，不是outline或box-shadow
很多人试了outline或box-shadow发现“看起来像边框但点不中”“打印时消失”“影响布局计算”，其实真正控制div边框的只有border这一套。它直接参与盒模型计算，能精确控制厚度、样式、颜色，且所有浏览器兼容无歧义。
常见错误现象：border: 1px solid #000;写成border: 1px #000 solid;（顺序错，部分老IE会失效）；或者只写border-width: 2px;却没配border-style（此时边框根本不会显示——这是最常踩的坑）。
-
border是简写，必须包含宽度、样式、颜色三要素，缺一不可（样式尤其不能省） - 三个值的简写顺序固定：
border: <width><style> <color>;</style></width>，比如border: 2px dashed red; - 想单独控制某一边？用
border-top、border-right等，它们也必须带style - 颜色支持
#fff、rgb(0,0,0)、transparent，后者常用于占位不显形
border-width设成0或thin/medium/thick有啥区别
border-width看着简单，但thin/medium/thick是相对值，具体像素取决于浏览器和DPI，实际项目里基本不用。真要可控，就老实用px、em或rem。
特别注意：border-width: 0;和border: none;效果不同——前者只是宽度为0，边框样式和颜色还在；后者是彻底移除边框（包括样式），DOM里查getComputedStyle(el).borderStyle会返回none。
立即学习“前端免费学习笔记（深入）”；
- 响应式场景下，用
rem比px更稳妥，比如border: 0.125rem solid #ccc; - 想让边框随字体缩放？
border-width: 0.0625em;（1em = 当前font-size） - 不要用
border-width: inherit;除非你确认父元素border已定义，否则容易意外出虚线
border-color支持渐变或图片吗
不支持。border-color只接受纯色值（含transparent）。想实现渐变边框，得绕路：background-image + padding + background-clip: padding-box;，或者用box-shadow模拟（但那已不是语义上的边框）。
另一个现实问题：当div有border-radius时，纯色border会自动圆角，但用box-shadow模拟的“边框”在圆角处可能发虚或断开。
- 渐变边框实操方案：
div { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); background-clip: padding-box; border: 2px solid transparent; border-radius: 8px; } - 图片边框？用
border-image，但它兼容性差（IE全不支持），且裁剪逻辑复杂，日常慎用 - 别忘了
border-color可以四个方向不同，比如border-color: #f00 #0f0 #00f #ff0;
border导致div宽度变大？box-sizing怎么救场
默认box-sizing: content-box;，这时width: 200px; + border: 5px solid #000; = 实际占位210px（左右各+5px）。很多布局崩掉就因为这个“隐形加宽”。
救法就是统一加box-sizing: border-box;，它让width包含border和padding，所见即所得。但要注意：这个声明必须在border设置之前生效，否则无效。
- 全局重置推荐写法：
*, *::before, *::after { box-sizing: border-box; } - Flex/Grid容器里的子项，即使没设
box-sizing，border也不会破坏主轴尺寸计算，但交叉轴仍受影响 - 用
calc()硬调宽度（如width: calc(200px - 10px);）不如改box-sizing干净，还容易漏算padding
事情说清了就结束。border看着简单，但宽度计算、样式依赖、兼容写法这三点，随便漏一个就会卡住半天。
