by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=810

一、展示

下面的截图所展示的UI效果，纯粹使用CSS3实现的，此效果可以在Opera10.5及Firefox3.6下看到，由于IE浏览器对CSS3的支持比老婆支持老公出去找小姑娘还弱，深入去研究其技术那还为时过早，但是，作为观赏者，一起体验一下CSS3惊为天人的潜力，对于眼界和一些想法观点的转变还是颇有帮助的。

如果您抱有怀疑，认为上面明明就是一张图片做成的图片，没有关系，您可以狠狠地点击这里：CSS3仿window7炫酷界面demo

为了您更加直观的查看效果的实现，我在demo页面上添加了简单的交互，可以按照您的需要查看对应的元素以及核心的CSS3代码。如下图所示：

二、一些简单的说明

此炫酷效果的实现只用到了三种CSS3属性，一个是text-shadow(关于此属性，您可以点击这里)、另外一个是border-radius(关于此属性，您可以点击这里)、还有就是box-shadow(关于此属性，您可以点击这里)
，其余一些更加复杂的CSS3属性，例如背景渐变，border-color(多边框色), border-image（边框背景）都没有用到。

对于上面三种CSS3属性，前两个应该是相对熟悉些，第一个是文字阴影，第二个是圆角，在本文所展示的UI效果中，这两个属性属于次要的，绝大多数起作用的还是最后的box-shadow盒阴影属性。

或许都知道，目前的webkit核心浏览器是支持box-shadow属性的，但是我们看demo页面的效果，在chrome或是Safari下稍微次了些，为何？这是由于目前webkit核心浏览器不支持box-shadow中的inset属性，转换成photoshop中图层样式的术语就是“内阴影”，目前Firefox3.6+以及Opera10.5+都是支持box-shadow的，而且支持box-shadow的内阴影效果；仅仅支持内阴影效果也无法实现如此逼真的window7 UI界面效果，还有一点很重要，就是对box-shadow多阴影的支持，就是您可以添加多个阴影属性，浏览器会自动将这些效果重叠，于是可以实现各种光晕，渐变，五彩斑斓，细腻夺目的效果。

例如使用如下的一段样式：

-webkit-border-radius: 40px;
-webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000;
-moz-border-radius: 40px;
-moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;

height: 34px;
width: 80px;
border-radius: 40px;
background: #034a76;
box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;

可以得到类似下面的按钮效果，即水晶高光按钮效果，说实话，这样的效果我是从来没有想过只要几行CSS代码就可以实现的，我实在是太惊叹了，技术的发展真是迅猛！

好了，其他的我就不说什么了，我真是期待CSS3成为标准的那天，那整个web将会是前端的天下，各类技术层出不穷，人类的灵感得到前所未有的释放，我期待着这么一天……

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=810

（本篇完）