如何为按钮添加右下侧drop-shadow投影样式？附预期效果示例

1. 标题层级 #

二级标题 #

三级标题 #

2. 无序列表 #

• 基础列表项1
• 基础列表项2
  • 嵌套子列表项1
  • 嵌套子列表项2

3. 文本强调 #

这是斜体强调的内容，这是粗体强调的内容。

4. 代码与命令 #

单行代码示例：git commit -m "fix: 修复按钮样式"
多行代码块示例：

.button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
}

5. 引用文本 #

引用内容常用于展示说明、引用资料等场景。

6. 链接示例 #

Stack Overflow

7. 图片示例 #

按钮左下侧投影效果

要实现按钮右下侧的投影效果，直接用CSS的box-shadow属性就能搞定，参数可以精准控制投影的偏移方向和样式：

核心代码 #

.button {
  /* 按钮基础样式 */
  padding: 10px 22px;
  border: none;
  border-radius: 4px;
  background: #ffffff;
  /* 右下侧投影：水平偏移 垂直偏移 模糊半径 颜色 */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
}

参数说明 #

• 第一个4px：水平向右偏移（正值向右，负值向左）
• 第二个4px：垂直向下偏移（正值向下，负值向上）
• 第三个8px：投影的模糊程度，数值越大越柔和
• 最后是半透明的颜色值，让投影更自然不突兀

如果你要实现图里的左下侧投影，只需要把水平偏移改成负值：

box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.15);

内容的提问来源于stack exchange，提问作者Fehzan