&nbs p;
一、展示
下面的截图所展示的UI效果，纯粹使用 CSS 3实现的，此效果可以在 opera 10.5及Firefox3.6下看到，由于IE浏览器对CSS3的支持比 老婆 支持老公出去找小姑娘还弱，深入去研究其技 术 那还为时过早，但是，作为观赏者，一起体验一下CSS3惊为天人的潜力，对于眼界和一些想法观点的转变还是颇有帮助的。
如果您抱有怀疑，认为上面明明就是一张图片做成的图片，没有关系，您可以狠狠地点击这里：CSS3仿window7炫酷界面demo
为了您更加直观的查看效果的实现，我在demo页面上添加了 简单 的交互，可以按照您的需要查看对应的元素以及核心的CSS3代码。如下图所示：
二、一些简单的说明
此炫酷效果的实现只用到了三种CSS3属性，一个是 text -s hadow (关于此属性，您可以点击这里)、另外一个是 border-radius (关于此属性，您可以点击这里)、还有就是 box-shadow (关于此属性，您可以点击这里)
，其余一些更加复杂的CSS3属性，例如背景渐变， border-color (多边框色), border -i mage （边框背景）都没有用到。
对于上面三种CSS3属性，前两个 应该 是相对熟悉些，第一个是文字阴影，第二个是 圆 角，在本文所展示的UI效果中，这两个属性属于次要的，绝大多数起作用的还是最后的 box-shadow 盒阴影属性。
或许都 知道 ，目前的 webkit 核心浏览器是支持 box-shadow 属性的，但是我们看demo页面的效果，在ch rom e或是Safari下稍微次了些，为何？这是由于目前webk IT 核心浏览器不支持 box-shadow 中的 inset 属性，转换成photoshop中 图层 样式的术语就是“内阴影”，目前Firefox3.6+以及O PE ra10.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 #0 DF ; h ei ght: 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将会是前端的天下，各类技术层出不穷，人类的灵感得到前所未有的释放，我期待着这么一天……
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3模拟window7炫酷界面效果展示 全部内容，希望文章能够帮你解决 html5教程-CSS3模拟window7炫酷界面效果展示 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3模拟window7炫酷界面效果展示的详细内容...