[分享]css3怎么添加阴影

CSS3是网页设计中的一项重要技术，它可以让我们实现一些视觉效果，比如阴影。那么，如何在CSS3中添加阴影呢？接下来，我们将用简单的代码来演示。/ 添加阴影 / .shadow { boxshadow...

CSS3是网页设计中的一项重要技术，它可以让我们实现一些视觉效果，比如阴影。那么，如何在CSS3中添加阴影呢？接下来，我们将用简单的代码来演示。

/* 添加阴影 */
.shadow {
  box-shadow: 10px 10px 10px #888888;
}

/* box-shadow: 横向偏移量 纵向偏移量 模糊半径 阴影扩散半径 阴影颜色; */ 

在上述例子中，我们使用了CSS3中的box-shadow属性来实现阴影效果。该属性接受4个参数，分别为横向偏移量、纵向偏移量、模糊半径和阴影扩散半径。最后一个参数则是用来定义阴影的颜色。

举个例子，我们让一个div元素在页面中居中，并为其添加一个灰色的阴影，代码如下：

.center {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  background-color: #ffffff;
  box-shadow: 10px 10px 10px #888888;
} 

在上述代码中，我们设置了div元素的宽高为200px，并将其定位在页面中央。最后，我们通过box-shadow属性为其添加了一个灰色阴影。

通过上述例子，相信大家已经掌握了CSS3中如何添加阴影的方法。希望读者可以将这个技术应用到自己的网页设计中，并为页面增加一些炫酷的效果。