最直接方式是用 CSS 的 border 简写属性，如 div { border: 1px solid #333; }，其中 solid 表示实线，单位不可省略。
用 border 设置实线边框最直接的方式 html5 本身不提供“设置边框”的能力，真正起作用的是 CSS。最常用、最可靠的方法就是用 border 简写属性：
比如给一个
加 1px 深灰色实线边框：
加了
实线边框导致卡顿的优化手段 重点不是去掉边框，而是减少它的渲染开销：
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 隔开，减少绘制节点数 - chrome DevTools 中打开「Rendering」面板，勾选「Paint flashing」，看卡顿时哪些区域在频繁重绘——如果边框区域高亮明显，说明它是瓶颈
border-style: solid 和别的取值性能有差异吗？ 没有。浏览器对 solid、dashed、dotted 的底层绘制路径基本一致，性能差别可忽略。
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 倍像素） - 是否开启抗锯齿（高 DPR 屏幕下，
border-radius: 2px会强制启用） - 边框颜色是否为半透明（
rgba(0,0,0,0.5)会触发额外混合计算）
实线边框本身很轻量，卡顿大概率来自它所处的上下文——比如在 scroll 事件里反复切换 border，或和动画属性耦合太紧。排查时优先看“谁在动”，而不是“边框有没有问题”。