css阴影效果怎样做更好看

当光撞击物体并投射阴影时，阴影可能呈现出许多独特的特征。那么，如果您尝试捕捉真实阴影的微妙之处，box-shadow那么您就很不走运了。该box-shadowCSS属性是不完全建立鼓励表现。它本质上会产生对象的模糊轮廓-您可以更改其偏移，模糊半径，散布和颜色，仅此而已。我们无法接近地表达现实生活中阴影的复杂性和细微差别。

但是，通过简单的CSS技术，我们可以扩展选择范围。如果使用layered，box-shadow我们可以对阴影的渲染方式进行更细粒度的控制：

查看默认box-shadow效果（第一个框）与分层效果box-shadow（第二个框）相比，方形和笨拙的外观。我们可以通过创建多个box-shadows（用逗号分隔每个阴影），并为每个阴影增加偏移量和模糊（box-shadow语法为X-offset Y-offset blur color）来实现此效果：

/* Default box-shadow */
.box {
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Create smoother box-shadows by layering multiple
 * shadows with gradually increasing radius and offset */
.shadow-5 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
} 这种简单的分层技术使我们可以更好地控制阴影的渲染，并可以微调清晰度，距离和散布。例如，您可以增加或减少阴影数量以创建较小或较大的跨度。 （请注意，如果希望增加强度，则如果增加层数，则必须降低每个层的Alpha值。） 

.shadow-4 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 
              0 2px 2px rgba(0,0,0,0.15), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.15);
}

.shadow-6 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 8px 8px rgba(0,0,0,0.11), 
              0 16px 16px rgba(0,0,0,0.11), 
              0 32px 32px rgba(0,0,0,0.11);
}

控制清晰度与控制散布一样容易，但是我们可以同时使用每层的Alpha值和模糊值来分别更改阴影的深度浓度和模糊半径。

上面的示例对所有图层使用相同的alpha值，但是我们可以让alpha值随着每一层的增加或减少而创建更多或更少的漫反射阴影。

对于下面更集中的阴影，最里面的阴影（具有最小的偏移和模糊）具有最高的alpha值，并且每层都减小。相反，第二个框的阴影更加分散，其中最内层的alpha值最低：

.blog-shadow-sharp {
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
              0 2px 2px rgba(0,0,0,0.20), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.10),
              0 16px 16px rgba(0,0,0,0.05);
}

.blog-shadow-diffuse {
    box-shadow: 0 1px 1px rgba(0,0,0,0.08), 
                0 2px 2px rgba(0,0,0,0.12), 
                0 4px 4px rgba(0,0,0,0.16), 
                0 8px 8px rgba(0,0,0,0.20);
}

我们还可以增加blur更高的增量，以增加传播并创建更柔和的，几乎是梦幻的效果：

.blog-shadow-dreamy {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

最后，我们可以通过将模糊半径和Y偏移量解耦来控制距离，并以更大或更小的增量来增加偏移量：

.shadow-shorter {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
}

.shadow-longer {
  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
              0 4px 2px rgba(0,0,0,0.09), 
              0 8px 4px rgba(0,0,0,0.09), 
              0 16px 8px rgba(0,0,0,0.09),
              0 32px 16px rgba(0,0,0,0.09);
}