必须显式声明 border-left-style，如 border-left: 4px solid #ff6b6b；需配合 padding-left（至少边框宽+8px）和 margin-left: 0 避免视觉拥挤与对齐错位；深色模式应使用 css 变量配合 prefers-color-scheme 统一维护。
用 border-left 实现左侧彩色强调边框
直接加 border-left 就行，但别只写宽度和颜色——漏掉 border-left-style 会导致边框完全不显示。CSS 中 border 简写属性的三个基础值（宽度、样式、颜色）缺一不可，而 border-left 同理。
常见错误是这样写：border-left: 4px #ff6b6b; —— 浏览器会忽略整条声明，因为没指定 solid（或 dashed 等）。必须显式声明样式：
blockquote {
border-left: 4px solid #ff6b6b;
padding-left: 16px;
margin-left: 0;
}
padding-left 和 margin-left 必须配合调
只加 border-left 会让文字紧贴边框，视觉拥挤，甚至被遮挡。这时候 padding-left 是必须项，用来撑开内容区；而 margin-left 则要看上下文——如果父容器有默认缩进（比如 article 里段落自带外边距），不重置可能造成双倍空白或对齐错位。
-
padding-left建议设为border-left-width + 8px起步（例如边框 4px → 填充至少 12px） -
margin-left: 0推荐显式设置，避免继承父级或用户代理样式干扰 - 若需响应式，
padding-left可用clamp()或媒体查询微调，但border-left-width一般保持固定更稳
在 <p></p> 上直接用要注意语义和继承
给普通段落加 border-left 没问题，但得小心两点：一是不要污染全局 p 样式（务必用 class 限定），二是注意内联元素（如 <em></em>、<strong></strong>）不会触发边框渲染——边框属于块级盒模型，只作用于块级或 display: block 的元素。
如果你发现加了样式却没效果，先检查：
- 该
<p></p>是否被 JS 动态移除了 class？ - 是否被更高优先级规则覆盖？用浏览器开发者工具看 computed styles 里的
border-left是否为none - 是否意外设置了
display: inline或display: inline-block？这时需补vertical-align: top防止基线偏移，但更稳妥是保持display: block
深色模式下 border-left 颜色要可维护
硬编码颜色值（比如 #ff6b6b）在深色模式下可能对比度不足，甚至看不见。别靠人眼手动切主题色——用 CSS 自定义属性 + @media (prefers-color-scheme: dark) 才可靠。
:root {
--accent-border: #ff6b6b;
}
@media (prefers-color-scheme: dark) {
:root {
--accent-border: #ff9e9e;
}
}
.highlighted-paragraph {
border-left: 4px solid var(--accent-border);
}
真正麻烦的是设计系统里多个强调色共存时，每个 border-left 都得单独配暗色变量——漏掉任何一个，上线后深色模式下就只剩一条灰蒙蒙的线，几乎等于没加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
