css样式添加div阴影

在网页设计中，我们经常需要为页面元素添加一些特效以提升用户体验。在此介绍如何使用CSS样式为div添加阴影效果。

首先，在HTML文件中添加一个div元素，用于测试阴影样式：

div class="box">
    p>
    这是一个测试元素/p>
    /div>

然后，在css文件中添加以下代码：

.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 2px 2px 5px #888;
 }
    

在代码中，我们通过.box来指定样式作用于我们的div元素。接下来的width和height属性分别设置div的宽度和高度，background-color属性用于设置div的背景色。

最后一个box-shadow属性是我们本文想要介绍的主角。它的第一个参数2px为水平偏移量，第二个参数2px为垂直偏移量，第三个参数5px为阴影模糊半径，表现为阴影的模糊程度，最后一个参数#888为阴影颜色。

通过这样简单的代码，我们就可以成功地为div元素添加一个优美的阴影效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！