css下边框怎么加阴影

CSS下边框怎么加阴影 CSS下边框加阴影可以为网页增添一份立体感，让其看起来更加生动有趣，那么如何来实现CSS下边框的阴影呢？接下来就由本文来为大家讲解一下具体的实现方法。 首先，在CSS中设置一个div，以div#box为例，代码如下：

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

上面的代码中，box-shadow的属性值是由四个部分组成的，分别是： - 水平阴影偏移量：0 - 垂直阴影偏移量：2px - 模糊半径：4px - 阴影颜色：rgba(0, 0, 0, .2) 以上值可以根据自身需求予以改变。 下面我们来解释一下这四个部分的含义： - 水平阴影偏移量：值越大，阴影向右侧偏移的距离就越大，值为负数时阴影向左侧偏移。 - 垂直阴影偏移量：值越大，阴影向下偏移的距离就越大，值为负数时阴影向上偏移。 - 模糊半径：值越大，阴影越模糊，效果越虚化，可以理解为是阴影扩散的程度，值为0时阴影边缘清晰，具体效果可以自行尝试修改。 - 阴影颜色：跟CSS中的color属性一样，一般使用rgba颜色值，具体如何设置可以看相关文章。 最终效果如下图所示： 可见使用CSS为下边框加上阴影并不复杂，只需要简单几步即可轻松实现。