HTML5中实线边框必须用CSS显式声明border-style:solid，如border:1px solid #ccc；锯齿源于亚像素渲染，需用整数宽度、translateZ(0)、font-smoothing等协同优化。
HTML5 中用 CSS 设置实线边框的正确写法
HTML5 本身不提供边框设置能力，所有边框控制都靠 CSS。想让 border 是实线，必须显式指定样式为 solid，不能只写宽度或颜色——否则默认是 none，边框压根不显示。
常见错误写法：border: 1px #ccc;（缺样式，无效）
正确写法：border: 1px solid #ccc; 或拆开写：border-width: 1px; border-style: solid; border-color: #ccc;
-
border-style必须是solid、dashed等明确值，不能省略 - 使用缩写时，顺序无关紧要，但三要素（宽、型、色）缺一不可才生效
- 若仅需某一边有实线，用
border-top: 1px solid #ddd;更精准，避免重置其他边
为什么实线边框看起来有锯齿？根源在亚像素渲染
所谓“锯齿感”，本质是浏览器对非整数像素位置或非整数边框宽度的渲染抖动，尤其在缩放、滚动、或高 DPI 屏幕下更明显。不是边框“画得糙”，而是 CSS 像素与物理像素没对齐。
- 当元素位置或
border-width是小数（如1.5px），浏览器会插值抗锯齿，反而模糊或发虚 - 父容器用了
transform: scale(0.9)或页面被缩放（Ctrl+/-），也会触发亚像素绘制 - 某些字体抗锯齿策略（如 macOS 的 subpixel rendering）会影响相邻边框边缘的灰度过渡
让实线边框“锐利无锯齿”的实操技巧
核心思路：强制边框落在设备像素整数网格上，并关闭干扰性渲染优化。
- 统一用整数
border-width：只用1px、2px，避开1.2px或0.8px - 确保元素不处于亚像素位置：给父容器加
transform: translateZ(0)或will-change: transform，促使其进入独立图层，提升渲染精度 - 禁用文本抗锯齿对边框的“拖累”：对边框容器加
-webkit-font-smoothing: antialiased;（仅限 WebKit，减少子文本影响） - 极端情况可尝试
image-rendering: -webkit-optimize-contrast;，虽主要针对图片，但在部分 Chrome 版本中能收紧边框边缘
示例：
立即学习“前端免费学习笔记（深入）”；
div.box {
border: 1px solid #e0e0e0;
transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
别忽略的细节：box-sizing 和 outline 的干扰
很多人调了半天边框，最后发现是 box-sizing 搞的鬼——默认 content-box 下，border 会撑大元素，导致布局错位、相邻元素间距异常，视觉上像“边框晃动”。而 outline 虽不占布局空间，但若误设了 outline: 1px solid #000，会和 border 叠加出双线假象，也被当成“锯齿”。
- 始终显式设置
box-sizing: border-box;，让 width/height 包含边框，布局可控 - 检查是否意外继承了
outline（比如按钮、焦点状态），用outline: none;或重置为outline: 0; - 用浏览器开发者工具的“Layout”面板，悬停看
border是否真正贴合盒模型边缘，而非漂在半空
真正的“无锯齿”，不是靠某个 magic 属性一招制敌，而是位置、尺寸、渲染层、字体策略四者协同对齐的结果。稍有偏差，就容易在滚动或缩放时露馅。
