css3阴影凹进去

CSS3 阴影效果是在网页设计中非常重要的一种效果,可以增强网页的层次感,让页面更具立体感。其中阴影效果有很多种,其中一种是凹进去的阴影效果。下面我们来讲解一下如何实现凹进去的阴影效果

.Box {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: #fff;
  Box-shadow: inset 0 0 10px rgba(0,0.1);
}

css3阴影凹进去

上面的代码中,我们给 .Box 添加一个内阴影,实现了凹进去的效果。其中,Box-shadow 属性用来设置阴影效果,其中参数 inset 表示内阴影,0、0 分别表示阴影的 x 和 y 坐标,10px 表示阴影的模糊半径,rgba(0,0.1) 表示阴影的颜色和透明度。

如果我们想让阴影的效果更加明显,可以将阴影的模糊半径增加,比如:

.Box {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: #fff;
  Box-shadow: inset 0 0 20px rgba(0,0.3);
}

此时,阴影的效果会更加明显。

最后,我们可以通过调整阴影的位置和模糊程度等参数来实现不同的效果,让页面更具立体感。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效