巧用box-shadow让架构看起来更有层次感

巧用box-shadow让架构看起来更有层次感

 2016-02-26 11:02    网页设计   标签：css 代码   902    发表评论

有时候，网页架构的边框可以更好的让网站看起来更有层次感。

我一直用的是火狐浏览器，每次都自动打开的火狐主页。其中，这些外面有隐约透明感的边框很吸引我，我看了下代码，发现，它们都是通过box-shadow这个代码结构来制作的。

代码如下：

box-shadow: 0 1px 5px rgba(0,0,0,0.2);

box-shadow本来的作用就是给架构div增加一个背景层，这段代码规定增加了一个只有20%透明度的颜色。代码前三个数值分别代表的是水平长度，纵向长度和模糊半径，第四个值是颜色。一般情况下，我们会设置一个带#的颜色值，而火狐主页运用的是rgba形式，增加的是一个透明值，这就使得整体看起来更朦胧了。

对于这种设置，我们可以通过 css3maker.com 网站来进行预调整以达到预期的效果。