按钮阴影用box-shadow、圆角用border-radius，二者独立可共存；box-shadow阴影始终矩形但随轮廓裁剪，常用写法如0 2px 4px rgba(0,0,0,0.2)；border-radius推荐4px或20px像素值，避免超高度一半。
给按钮加阴影用 box-shadow，圆角用 border-radius
两个属性完全独立，可以同时使用，互不影响。常见错误是把 box-shadow 当成“边框阴影”而误调 border 相关值，或以为 border-radius 会影响阴影形状——其实阴影始终是矩形投射，只是会随元素视觉轮廓“自然裁剪”。
box-shadow 参数顺序和常见写法
语法是 box-shadow: h-offset v-offset blur spread color;，后两项可省略。按钮常用柔和内陷或外凸效果：
-
box-shadow: 0 2px 4px rgba(0,0,0,0.2);—— 轻微下移+模糊，模拟自然光下按钮按压感 -
box-shadow: 0 0 0 2px #007bff;—— 无偏移无模糊，仅 2px 外发光（常用于焦点状态） - 避免写
box-shadow: 0 0 0 black;：第三项blur为 0 时阴影不可见，必须设正数或留空
border-radius 控制圆角程度与兼容性注意点
值可以是长度（px、rem）或百分比。按钮推荐用固定像素值，更可控：
-
border-radius: 4px;—— 通用中等圆角，适配大多数 UI 设计系统 -
border-radius: 20px;—— 较大圆角，适合现代卡片式按钮，但注意别超过按钮高度一半，否则顶部/底部变平 - 旧版 Safari（iOS border-radius +
overflow: hidden组合有渲染 bug，如果按钮含图标或文字溢出，阴影可能被意外裁切
组合使用时的典型 CSS 写法
直接写在按钮选择器里即可，顺序无关，但建议把 border-radius 放前面，逻辑上先定义形状再加效果：
立即学习“前端免费学习笔记（深入）”；
button {
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background-color: #007bff;
border: none;
padding: 8px 16px;
}
特别注意：如果按钮有 border，border-radius 会同时作用于边框和背景，但 box-shadow 始终从元素外边缘出发——所以加了边框后，阴影位置实际会向外偏移一个边框宽度。
