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 版本中能收紧边框边缘
示例：
