用CSS的border属性加边框最直接；outline适合不占布局空间的描边；圆角需border-radius配合border；响应式边框优先用em/rem等相对单位。
用 CSS 的 border 属性加边框最直接
HTML5 本身不提供给 border 属性在 HTML5 中已被废弃（比如旧写法 border：
示例：
@@##@@
- 数值部分（如
2px）决定粗细，支持px、em、rem等单位 - 样式（如
solid）可换为dashed、dotted、double等 - 颜色支持命名色、十六进制（
#333）、RGB（rgb(51, 51, 51)）等 - 注意：默认
border会增加元素总尺寸（盒模型默认是content-box），若需保持宽高不变，得配合box-sizing: border-box
用 outline 实现「不占布局空间」的描边效果
当边框只是视觉强调、不想影响图片周围排版（比如响应式网格中挤占间隙），outline 是更轻量的选择——它绘制在元素外层，不参与盒模型计算：
@@##@@
-
outline不支持圆角（border-radius对它无效） - 不能像
border那样分边设置（border-top可行，outline-top不存在） - 某些浏览器对
outline的聚焦样式有默认行为（如点击后出现虚线），若用于非交互场景，建议加outline-offset: 0明确控制偏移
需要圆角边框？必须用 border-radius + border
单纯加边框容易，但带圆角的「卡片式」图片边框，得组合两个属性。注意顺序和兼容性：
立即学习“前端免费学习笔记（深入）”；
@@##@@
-
border-radius值要小于图片自身尺寸，否则圆角可能被裁切（尤其当图片用object-fit: cover时） - 如果图片是内联元素（默认
display: inline），border-radius在某些老版本 Safari 中表现异常，建议显式设display: block或inline-block - 想让边框只出现在特定区域（比如仅左上+右下），只能靠伪元素或额外包裹层，
border本身不支持单边圆角
响应式边框粗细怎么处理？优先用相对单位
固定像素边框（如 border: 1px solid #ccc）在高清屏或缩放页面时容易显得过细或模糊。更健壮的做法是用相对单位：
- 用
em或rem：边框随父级字号缩放，适合字体驱动的 UI（如border: 0.0625rem solid #ddd≈ 1px 基准） - 用
vw/vh：适合全屏大图边框（如border: 0.2vw solid #222），但小屏下可能过粗，需配合媒体查询限制最小值 - 避免用
px+transform: scale()模拟边框，会导致边框也被缩放，锯齿明显且不可控
真正麻烦的是边框与图片比例协同——比如头像边框要始终是图片宽度的 2%，这时就得用 CSS 自定义属性 + calc()，或者干脆交给 JS 动态计算，纯 CSS 目前无简洁解法。
