[分享]css做下边框阴影效果

CSS样式是网页设计中一个非常重要的部分，可以通过CSS样式让网页看起来更加美观和实用。其中，下边框阴影效果就是CSS样式中的一种常见效果。下面就给大家介绍一下如何使用CSS样式来实现下边框阴影效果，...

CSS样式是网页设计中一个非常重要的部分，可以通过CSS样式让网页看起来更加美观和实用。其中，下边框阴影效果就是CSS样式中的一种常见效果。

下面就给大家介绍一下如何使用CSS样式来实现下边框阴影效果，可以参考下面这段代码：

.box {
  border-bottom: 1px solid #ccc; 
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.075);
} 

上面这段代码中，我们使用了border-bottom来设置下边框为1像素的实线，颜色为#ccc，同时也用了box-shadow来添加阴影效果。box-shadow是CSS3的新属性，它可以用来在元素周围添加阴影。

其中，box-shadow属性的参数分别为：水平偏移量、垂直偏移量、阴影模糊半径、阴影扩张半径、阴影颜色。上述代码中设置的参数为0 2px 2px rgba(0, 0, 0, 0.075)。其中0表示水平偏移量为0，2px表示垂直偏移量为2像素，2px表示阴影模糊半径为2像素，rgba(0, 0, 0, 0.075)表示阴影颜色为黑色，透明度为0.075。

这样，我们就可以很容易地实现下边框阴影效果了。