code标签需设display:inline-block或包裹在pre中才能生效border-radius，因内联元素无独立盒模型；推荐pre code{display:block;border-radius:6px}或code{display:inline-block;border-radius:0.3em}。
给 code 标签加圆角必须包裹在块级容器里
code 默认是内联元素（display: inline），直接写 code { border-radius: 6px; } 不会生效——不是语法错，是 CSS 渲染规则限制。它没有独立的盒模型边界可“圆”，border-radius 对纯内联元素的 corner 区域不触发裁剪。
实操建议：
- 用
span或pre包一层，再设display: inline-block或block - 更稳妥的是直接用
pre+code组合：pre code { display: block; padding: 8px; border-radius: 6px; } - 若需保留行内语义（比如文字段落中嵌入单个命令），改用
code { display: inline-block; vertical-align: middle; }，并手动补padding防文字贴边
pre 和 code 的圆角行为差异
pre 是块级、保留换行和空格；code 是内联、只包裹片段。二者圆角生效逻辑不同：
-
pre自带完整盒模型，border-radius直接作用于其外框，但默认有浏览器预设的margin和white-space，可能让圆角被撑开或截断 -
code单独设border-radius无效，除非显式声明display并控制line-height和padding - 常见错误：只给
pre加border-radius，却忘了pre code内容可能溢出（尤其长命令折行时），需加overflow-x: auto或word-break: break-all
代码框圆角 + 背景/边框/阴影的协同要点
圆角只是起点，真正影响可用性的是背景色、边框粗细、阴影模糊值之间的配合：
- 浅色背景配细边框（
1px solid #e0e0e0）+ 小圆角（4px）更轻量；深色主题建议用2px边框 +6px圆角增强轮廓 - 加
box-shadow发光时，避免与border-radius值冲突：比如border-radius: 8px搭配box-shadow: 0 2px 8px rgba(0,0,0,0.1)，模糊值不宜超过圆角值的 2 倍，否则边缘发虚 - 用
background-color时注意：透明 PNG 或 SVG 图标嵌在code里会透底，建议统一设background: #f8f9fa或background: var(--code-bg)
响应式代码框圆角的坑：字体缩放会破坏圆角视觉一致性
移动端或用户放大字体时，code 容器高度随 font-size 变化，但固定像素的 border-radius: 6px 不会等比缩放，导致小字号下圆角过突、大字号下近乎直角。
解决思路：
- 优先用相对单位：
border-radius: 0.3em（基于当前字体大小）比4px更稳健 - 对高亮代码块（如
pre[class*="language-"]），配合line-height: 1.4锁定行高，防止圆角被撑变形 - 避免在
@media (prefers-reduced-motion: reduce)下仍强制动画圆角——这不是装饰，是可访问性边界
overflow 的 pre，一段没控制 display 的 code，或者一行被用户缩放扭曲的 em 值——这些地方才真正决定代码框看起来“专业”还是“毛边”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
