按钮阴影用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（i

  

  OS 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 始终从元素外边缘出发——所以加了边框后，阴影位置实际会向外偏移一个边框宽度。

# css  # safari  # ios  # overflow  # 选择器  # border  # ui  # bug  # 圆角  # 向外  # 写在  # 两项  # 再加  # 旧版  # 作用于  # 第三项  # 卡片式  # 器里 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： jQuery 常见小例汇总  android nfc常用标签读取总结  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  独立制作一个网站多少钱,建立网站需要花多少钱？  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  浅谈redis在项目中的应用  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  nginx修改上传文件大小限制的方法  如何在IIS中配置站点IP、端口及主机头？  如何在腾讯云免费申请建站？  智能起名网站制作软件有哪些,制作logo的软件？  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  如何在万网利用已有域名快速建站？  如何在不使用负向后查找的情况下匹配特定条件前的换行符  如何快速搭建高效WAP手机网站？  如何在服务器上三步完成建站并提升流量？  Laravel如何实现一对一模型关联？（Eloquent示例）  如何快速重置建站主机并恢复默认配置？  如何在万网主机上快速搭建网站？  Laravel如何使用Gate和Policy进行授权？（权限控制）  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  深圳网站制作培训,深圳哪些招聘网站比较好？  公司门户网站制作流程,华为官网怎么做？  Laravel如何操作JSON类型的数据库字段？（Eloquent示例）  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  Python文本处理实践_日志清洗解析【指导】  潮流网站制作头像软件下载,适合母子的网名有哪些？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Laravel安装步骤详细教程_Laravel环境搭建指南  大连 网站制作,大连天途有线官网？  Laravel如何使用Blade组件和插槽？（Component代码示例）  如何正确下载安装西数主机建站助手？  昵图网官网入口 昵图网素材平台官方入口  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  三星网站视频制作教程下载,三星w23网页如何全屏？  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  如何彻底删除建站之星生成的Banner？  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  简单实现jsp分页  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  动图在线制作网站有哪些,滑动动图图集怎么做？  详解vue.js组件化开发实践  WEB开发之注册页面验证码倒计时代码的实现  JavaScript如何实现倒计时_时间函数如何精确控制  Laravel怎么实现验证码(Captcha)功能  Laravel怎么导出Excel文件_Laravel Excel插件使用教程