[分享]css中如何设置按钮阴影效果

在CSS中，我们可以使用box-shadow属性来设置按钮的阴影效果。

button {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
} 

这个box-shadow属性包括4个值：

• X轴的偏移量 （必须）
• Y轴的偏移量 （必须）
• 阴影半径 （可选）
• 阴影颜色 （可选）

在上面的例子中，我们设置了一个2像素的向下偏移和4像素的模糊半径。rgba(0, 0, 0, 0.25)是阴影颜色，其中0.25是透明度。如果你不需要透明度，你可以使用普通的十六进制颜色值。

你可以调整这些值来获得不同的阴影效果：

button {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
}

button {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
} 

记住，你可以在同一个元素上设置多个阴影，只需要在属性后面添加逗号分隔的阴影样式。

button {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 
              0px 6px 10px rgba(0, 0, 0, 0.2);
} 

现在你可以使用CSS的box-shadow属性来设计你自己的按钮阴影效果啦！