用border加边框必须同时指定宽度、样式、颜色三要素，如border: 1px solid #ccc；可单独设置某一边（如border-bottom）、支持虚线/透明等样式，响应式中需注意高DPR屏的1px适配问题。
怎么用 border 给元素加边框？别只写像素值
直接写 border: 1px solid #ccc 能出边框，但容易漏掉三个关键点：是否要单独控制某一边、是否要透明或虚线、是否要响应式适配。比如在移动端，1px 在高 DPR 屏上可能显示为 2 物理像素，显得过粗；这时该用 border: 0.5px solid #ddd（部分浏览器支持），或改用 box-shadow: 0 0 0 0.5px #ddd 模拟。
常见错误是给 input 或 button 加了 border 后，发现默认样式被覆盖导致失焦状态不可见——记得补上 :focus 的 outline 或重写 border-color：
input:focus {
border-color: #007bff;
outline: none;
}-
border-style可选solid/dashed/dotted/hidden，注意none和hidden渲染行为不同（后者参与盒模型计算） - 想只改底边？用
border-bottom: 2px double #e0e0e0，比全写border更安全，避免意外覆盖左右边 - 圆角边框和
overflow: hidden冲突时，子元素超出仍会显示——此时需确保子元素也带border-radius或用clip-path
border-radius 怎么写才不“圆得奇怪”？
border-radius 看似简单，但四个角数值顺序和单位混用最容易翻车。它接受 1–4 个值，类似 padding：一个值四角相同；两个值表示「上下 / 左右」；三个值是「上 / 左右 / 下」；四个值才是「上右下左」顺时针。
单位方面：px 固定，% 相对宽高——如果宽高不等，50% 也不一定得到正圆（只有宽高相等时才是）。想要真圆角头像？必须保证容器是正方形，且 border-radius: 50%。
立即学习“前端免费学习笔记（深入）”；
- 想让左上和右下是
8px，其余是4px？写成border-radius: 8px 4px 8px 4px，别用简写混淆 - 和
background-clip: padding-box配合可防止背景色溢出圆角边缘（尤其渐变背景时） - 动画中修改
border-radius会触发重排，性能差；如需动态圆角，优先考虑clip-path: round(…)（但注意 Safari 兼容性）
box-shadow 阴影老是发虚、偏移不对？看这三参数
box-shadow 的语法是 box-shadow: h-offset v-offset blur-radius spread-radius color，其中前两个必填，后三个可选。最常错的是把 blur-radius 设太大导致阴影“糊成一片”，或忽略 spread-radius 导致阴影没“撑开”感。
例如卡片悬浮效果，推荐组合：box-shadow: 0 2px 8px -2px rgba(0,0,0,0.1), 0 4px 16px -4px rgba(0,0,0,0.1)。这里用了两层阴影：第一层近、弱、略内收（负 blur 值不行，但负 v-offset 或 spread 可以），第二层远、透、更柔和。
- 阴影不会影响布局，但
z-index低的元素可能被盖住——检查父容器是否有overflow: hidden切掉了阴影 - 想做内阴影？加
inset关键字：box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) - 深色模式下硬编码
#000阴影会突兀，建议用rgba(0,0,0,0.1)或 CSS 自定义属性配合@media (prefers-color-scheme: dark)
边框 + 圆角 + 阴影一起用，哪个顺序和层级要注意？
渲染顺序是固定的：先画边框（border），再裁剪圆角（border-radius），最后叠加阴影（box-shadow）。这意味着 border-radius 会同时作用于边框和内容，但 box-shadow 的形状**不受** border-radius 影响——除非你用的是 inset 阴影或配合 clip-path。
一个典型陷阱：给图片容器设了 border-radius: 12px 和 overflow: hidden，再加 box-shadow，结果阴影还是方的。这是因为 box-shadow 是画在容器外层的，不随圆角变形。解决方法只有两个：
- 用
clip-path: inset(0 round 12px)（兼容性查 CanIUse，Safari 15.4+ 支持） - 把阴影移到伪元素上，并同步设置
border-radius：::after { border-radius: 12px; box-shadow: ... }
实际项目里，这三者叠加时，border-radius 值最好统一用变量管理，比如 --radius-md: 8px，否则改一处漏三处。
