[分享]css3底部边框阴影

CSS3底部边框阴影是一种常用的网页设计元素，可以为网页增加立体感，并且可以帮助网页内容更好地与背景区分开来。下面将介绍如何使用CSS3为网页添加底部边框阴影。 .box { width: 300px...

CSS3底部边框阴影是一种常用的网页设计元素，可以为网页增加立体感，并且可以帮助网页内容更好地与背景区分开来。下面将介绍如何使用CSS3为网页添加底部边框阴影。

 .box {
        width: 300px;
        height: 200px;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    } 

上面的代码中，.box是一个样式类，用于对一个元素进行样式设置。width和height分别设置该元素的宽度和高度，background-color设置该元素的背景颜色。box-shadow是实现底部边框阴影的关键，它的参数含义如下：

• 第一个参数设置水平阴影的位置，可以取负值

• 第二个参数设置垂直阴影的位置，可以取负值

• 第三个参数设置阴影的模糊半径，一般取正值

• 第四个参数设置阴影的扩散半径，一般取正值

• 最后一个参数设置阴影的颜色

下面是一个完整的例子：

 <div class="box">
        <p>这里是内容</p>
    </div> 

上面的代码中，一个div元素被设置为.box样式类，div元素里面包含了一个 p 元素。这里只是一个简单的例子，大家可以根据自己的需求进行相应的调整。