CSS怎样设置DIV阴影如果你正在设计一个网站并想要添加一些层次感和深度效果，那末通过CSS给div设置阴影是一个不错的选择。在本文中，我们将介绍怎么用CSS设置div阴影，以使你的网站显现出区别的层次感。第一部份：CSS设置box-shadow属性CSS的box-shadow属性是设置阴影的主要功能。首先，在html文件中新建一个div，然后在CSS中设置这个div的阴影样式。在CSS文件中，你可使用box-shadow属性来设置div的阴影。box-shadow属性需要四个参数来设置阴影的色彩、水平偏移量、垂直偏移量和模糊半径。例如：h2{font-size:20px;font-weight:bold;text-align:center;margin-top:50px;}p{font-size:16px;line-height:25px;margin-top:20px;margin-bottom:20px;}.shadow{width:300px;height:120px;background-color:fff;margin:30pxauto;border-radius:10px;box-shadow:5px5px10px888888;}在这个例子中，我们设置一个300像素宽、120像素高、白色背景的div，并添加了5像素水平距离、5像素垂直距离、10像素模糊半径和888888色彩的阴影效果。通过这类设置，这个div将显现出一个灰色阴影效果。第二部份：CSS设置多个阴影效果CSS不但可以设置一个阴影效果，还可以设置多个阴影效果。当你想要控制某个div的阴影效果和层次感时，这将非常有用。要设置多个阴影效果，你可使用逗号将它们分开。例如：.shadow2{width:300px;height:120px;background-color:fff;margin:30pxauto;border-radius:10px;box-shadow:5px5px10px888888,⑸px⑸px10px888888;}在这个例子中，我们设置了两个阴影效果。第一个阴影效果是5像素的水平距离、5像素的垂直距离、10像素模糊半径和888888的色彩，第二个阴影效果是⑸像素的水平距离、⑸像素的垂直距离、10像素模糊半径和888888的色彩。这个div将具有两个阴影效果，看起来更加立体，具有层次感。第三部份：CSS设置内阴影效果CSS不但可以设置外部阴影效果，还可以设置内部阴影效果。内部阴影效果可以为网站添加一些新的层次感和细节。要设置内部阴影效果，你可使用inset关键字。例如：.shadow3{width:300px;height:120px;background-color:fff;margin:30pxauto;border-radius:10px;box-shadow:inset5px5px10px888888;}在这个例子中，我们使用了inset关键字来设置内部阴影效果。阴影效果和前面的例子类似，但是它是在div内部添加的。这将使这个div看起来更加立体，具有新的层次感和细节。总结使用CSS设置div阴影效果是一个简单而强大的方法来提高你的网站的质感和细节效果。在这篇文章中，我们介绍了怎样使用CSS的box-shadow属性来设置阴影效果，并且还演示了怎样设置多个阴影效果和内部阴影效果。通过这些简单而有效的技能，你可以是你的网站看起来更加专业、现代化和引人注视。

桂！哥！网！络www.guIgEGe.cn