最可靠方式是直接用border-left，需搭配padding-left防文字紧贴、重置margin-left防浏览器默认干扰；宽度≥3px防Retina发虚，圆角需配对设置border-top-left-radius和border-bottom-left-radius，伪元素方案易出定位与继承问题。
直接用 CSS 的 border-left 实现最可靠
所有现代浏览器都支持 border-left，这是给 blockquote 加左边框最简单、最可控的方式。别去碰 outline 或伪元素模拟——除非你有特殊动效或渐变需求，否则纯边框就足够。
常见错误是只写 border: 1px solid #ccc，结果四边全出；或者漏写 padding-left，导致文字紧贴边框看不清。
推荐写法（含防踩坑细节）：
blockquote {
border-left: 4px solid #007acc;
padding-left: 16px;
margin-left: 0; /* 防止浏览器默认 margin 干扰对齐 */
color: #333;
}-
border-left宽度建议 ≥ 3px，太细在高分屏上容易发虚 -
padding-left值应略大于border-left宽度，否则文字会“压”在边框上 - 显式重置
margin-left，因为部分浏览器（如 Firefox）会给blockquote默认左外边距
想让边框带圆角或阴影？加 border-radius 和 box-shadow
纯直角边框太生硬，加点视觉层次更符合现代排版习惯。但要注意：只有 border-left 时，border-radius 必须配对设置，否则无效。
立即学习“前端免费学习笔记（深入）”；
正确写法（仅左边缘圆角）：
blockquote {
border-left: 4px solid #007acc;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
padding-left: 16px;
margin-left: 0;
}- 不能只写
border-radius: 4px——那会作用于全部四角，右边也会圆 -
box-shadow横向偏移设为0，避免阴影向右漂移破坏左侧强调感 - 如果用了
background-color，记得把box-shadow放在 background 后面，否则可能被遮住
用伪元素 ::before 要小心继承和定位问题
有人用 ::before 画竖线来“模拟”左边框，通常是为了实现渐变色或图标前置。但这种方式比纯 border-left 多出三处易错点：
- 必须设
position: relative在blockquote上，否则absolute伪元素会相对于 body 定位 -
::before默认是行内元素，要设display: block才能撑起高度 - 若
blockquote内部有margin-top的子元素，伪元素可能无法覆盖到首行顶部——得额外加top: 0和height: 100%
真要用，最小安全写法：
blockquote {
position: relative;
padding-left: 24px;
}
blockquote::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #007acc, #005a99);
}响应式场景下别忘了适配小屏幕
在移动端，过宽的左边框+大 padding 会挤占内容宽度，甚至触发横向滚动。这时候不要删边框，而是收缩它。
- 用
max-width限制blockquote宽度，再配合padding-left缩减 - 媒体查询中把
border-left-width从 4px 降到 2px，padding-left从 16px 降到 12px - 如果用了
box-shadow，小屏建议关掉——阴影在窄视口里反而模糊焦点
关键不是去掉样式，而是让强调逻辑依然成立：左边视觉锚点还在，只是更轻量。
最常被忽略的是：没测试嵌套 blockquote 场景。多层引用时，每层都套同样边框会显得重复冗余，建议用 blockquote blockquote 选择器单独降权第二层及以后的边框粗细或颜色透明度。
