最直接方式是用 CSS 的 border 简写属性，如 div { border: 1px solid #333; }，其中 solid 表示实线，单位不可省略。
用 border 设置实线边框最直接的方式
HTML5 本身不提供“设置边框”的能力，真正起作用的是 CSS。最常用、最可靠的方法就是用 border 简写属性：
比如给一个 常见诱因包括： 真正影响性能的是：div { border: 1px solid #333; }
solid 是关键值，表示实线；其他如 dashed、dotted 都不是实线1px），写成 border: 1 solid #333 会失效border-top、border-left 等更精准，避免重绘整块区域加了
border 后页面卡顿？先确认是不是它的问题
边框本身几乎不消耗性能，但某些组合会让浏览器频繁重排或重绘：
.item）批量加 border，尤其在滚动中动态添加box-shadow、transform 或 opacity，触发合成层过多border-radius + 高分辨率屏幕 + 大尺寸元素，导致光栅化压力上升will-change: transform 元素上又加边框，反而干扰渲染优化逻辑实线边框导致卡顿的优化手段
重点不是去掉边框，而是减少它的渲染开销：
outline 替代 border：比如 outline: 1px solid #333，它不占布局空间、不触发布局计算，适合仅作视觉提示的场景position: absolute 或 fixed 元素上叠加多层边框+阴影，改用单层 box-shadow: 0 0 0 1px #333 模拟边框（更轻量）li 单独设 border-bottom，改用父容器的 border-top + 子项 margin-top 隔开，减少绘制节点数
border-style: solid 和别的取值性能有差异吗？
没有。浏览器对 solid、dashed、dotted 的底层绘制路径基本一致，性能差别可忽略。
实线边框本身很轻量，卡顿大概率来自它所处的上下文——比如在 5px 比 1px 多画 25 倍像素）border-radius: 2px 会强制启用）rgba(0,0,0,0.5) 会触发额外混合计算）scroll 事件里反复切换 border，或和动画属性耦合太紧。排查时优先看“谁在动”，而不是“边框有没有问题”。
