10 个实验性的 JS/CSS3 编程技术

     本文所介绍的编程技术，可以有效地改善用户体验和设计师的工作流程，替代原先在IE6上使用的旧的解决办法。需要注意的是，下面列出的大部分技术还在实验阶段，而且有些不是纯CSS技术（一些使用jQuery或其它JavaScript库）。但本文还是非常值得一看。    <br />    <br />    <strong><a href="/misc/goto?guid=4958317241672678525" target="_blank">1.  告别overflow:hidden</a></strong>    <br />    <br /> 让我告别overflow:hidden的决定性因素是CSS3，具体而言是box-shadow。因为使用overflow:hidden首先 会对box-shadow造成负面影响。当父元素使用overflow:hidden 属性时，box-shadow会被裁剪。另外，text-shadow和transform也有可能被裁减掉。所以我更倾向于使用clearfix，感觉 这种一体化的东西更靠谱一些。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/289354ceda5851c5e42cd7b2256c10a0.jpg" width="580" height="150" />    </div>    <br />    <br />    <strong><a href="/misc/goto?guid=4958317242483474693" target="_blank">2.  使用CSS3样式的圆角</a></strong>    <br />    <br /> 随着CSS3越来越接近主流设计的标准，精心设计圆角背景图片已经成为过去，这意味着我们将节省在每个浏览器上花费的时间和精力了。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/3dbb5fb5220c45ffaed41e76c7389d94.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317243276382318" target="_blank"><strong>3. 让CSS3圆角HTML元素支持每个浏览器</strong></a>    <br />    <br /> 这是一个适用于IE的behavior htc文件，目的是让所有浏览器都支持border-radius元素。因为目前除了IE，其他的主流浏览器均可呈现圆角效果，只需加入4行CSS代码。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/4e7fb7be6b3f71e96b157c9e6d98a4e9.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317244054619799" target="_blank"><strong>4. IE CSS3伪选择器</strong></a>    <br />    <br /> 可以使IE识别CSS3伪类选择器，并渲染它们所定义的所有样式规则。你只需将这些脚本添加到你的页面中，就可以在你的样式表中使用这些选择器了。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/02f0af69d3fcccdf431b13e320c9dee0.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317244845066804" target="_blank"><strong>5. 更简洁的CSS3选择器代码</strong></a>    <br />    <br /> 在本教程中，我们来看看一些前期的和使用CSS3简化后期的代码，并通过实现的视觉效果来进行比较。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/4180a7b9d66b54c16419756ccbd2246d.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317245635816065" target="_blank"><strong>6. CSS3 + 渐进增强 = 智能设计</strong></a>    <br />    <br /> 渐进增强（Progressive Enhancement）和CSS3都是很好的技术，但CSS3更胜一筹。若将两者合并使用，就能使设计者创建出简洁的网站，且比以往更快、更容易。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/d23d3356d3783da764f7281114946e4d.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958201760650845214" target="_blank"><strong>7. 用CSS Text-shadow创建一个凸版效果</strong></a>    <br />    <br /> 凸版效果在网页设计中十分受欢迎，一些主流浏览器也支持CSS3的Text-shadow属性，用纯CSS创建这个效果也很简单。这绝对不是PS出来的！    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/edaf54839ef7af497c96e88d2c6704f6.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317247140875752" target="_blank"><strong>8. CSS3 HSL & HSLA</strong></a>    <br />    <br /> 这个教程是关于如何用HSL & HSLA 和quick+/- 向导制作出目前浏览器支持的效果。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/3de75b90f2a331f5bd77121dd5e0568b.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317247927307655" target="_blank"><strong>9. CSS3渐变：无图透明按钮</strong></a>    <br />    <br /> 在Mac OS X发布的时候，有无数的网上教程教授如何用Photoshop制作透明按钮，现在，试试用CSS创建吧！    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/a3301d6b6a7d6ea02dc6aa18c3b447cd.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317248720402498" target="_blank"><strong>10. 更多3D CSS变换</strong></a>    <br />    <br /> 教程中有各种各样的3D CSS变换。    <br />    <br />    <div style="text-align:center;">     <img alt="10 个实验性的 JS/CSS3 编程技术" src="https://simg.open-open.com/show/fc8330a7d0210b967bf71e5fb13e3a9d.jpg" width="580" height="150" />    </div>    <br />    <br />    <br /> 英文原文：    <a href="/misc/goto?guid=4958317249513173812" target="_blank">http://www.jquery4u.com/dynamic-css-2/10-brilliant-jscss3-coding-techniques/</a>    <br />    <br /> 来自：    <a href="/misc/goto?guid=4958317250288621155" target="_blank">http://www.iteye.com/news/23645</a>