CSS3 阴影效果是在网页设计中非常重要的一种效果,可以增强网页的层次感,让页面更具立体感。其中阴影效果有很多种,其中一种是凹进去的阴影效果。下面我们来讲解一下如何实现凹进去的阴影效果。
.Box { width: 200px; height: 200px; padding: 20px; background: #fff; Box-shadow: inset 0 0 10px rgba(0,0.1); }
上面的代码中,我们给 .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); }
此时,阴影的效果会更加明显。