俗话说的好，细节能决定成败。细节使得这个世界从平凡变得不平凡。可以说在共同设计一件物品时，同样的规则也适应于网页设计当中，愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是ไ价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重𝓡要，关键是要能够确定哪些细节更具有影响力。

进一步观察

我觉得Photoshop最令人舒服的是当我将图片放大到500%甚至更大时，它看上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体验方面图片吧。

以Concentrate 网站为例，它看起来很适合我们初次集中精力来欣赏。从一个高层次的视角开始，🌊我们可以看到Concentrate网站的使用了一个富有创意视觉技巧。

除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的橙子的果肉口感。进一🦹步研究，我们发现它使用了CSS3为文本增加一些阴影来增加与背景的对比。为了真正的欣赏细节，我们需要在进一步的研究。

像素级完善

真正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围，靠近网页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出来🐓。该区域顶端和底部的两个简单的单像素线是一个简洁的设计方式，它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。

其中的一个单像素线条更引人注意，这是因为它使用了亮橙色。它为两者之间的阴♔影和背景提供了对比，但是真正起作用的却是第二个暗橙色的线条。两个线条相互配合起来封锁了这ꦬ个顶部区域。

差异

当这个页面不再包括这些线条的设计的时候，差异就能最好的表现出来。下面，我将移去这些🍌线条来向大家展示两个像素能🗹够带来怎样的不同。

微妙的阴影

阴影效果对于网页设计者来说已经不陌生了。许多网站很早就💟开始使用它们并且经常模拟平面深度及🅺二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。

我们在设计中采用CSS3，它可以带来的宏伟的🧜差异让我们很容易为之兴奋不已。而对于我来说，真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。

还是来看这个Concentrate网站，它是一个很不错的例子，使用巧妙而有效地使用文字阴影效果使网站内容更容易♚阅读。这里以两种方式使用了CSS3的text-shadow属性。首先红色的标题在与背景颜色相近的情况下，被赋予淡淡的阴影以产生内嵌式的效果。基次在段落后面简单地给白色一点发射效果。

差异

比较上面的截图以及同样的页面在IE8(🅺不支持text-shadow属性)下渲染的效果，我们就能🦩发现它更难看得很多。

值得指出的是这个网站卖的是Mac软件，所以自然地不那么重视IE用户的体验了。

与网站细节相伴的工作的美好在于通过我们共同的努力一步一步迈进，我们仍然可以为我们的用户提供部分价值，而不需要疏远那些使用过时的浏览器的用户。🔥关键之处在于我们要使用所有这些技术来为已经很可靠的网页设计增加价值，没有一个基本的可靠的设计而空谈学习这些技术就是本末倒置。