WebKit中可用的CSS高级特性

使用在WebKit中可用的CSS高级特性，可以为你的网站或网络应用带来一个新的更令人兴奋的东西。

在阅读下面文章前，你可以先了解下网页教学网以前介绍的WebKit文章：浏览器Apple Safari和Google Chrome内核webkit

WebKit是Safari和Google Chrome浏览器的渲染引擎。所以，本文中的诀窍在Safari3/4和Chrome1.0/2.0中都是支持的。

因为浏览器会简单的无视他们不支持的CSS属性，所以在其他浏览器中，这些诀窍中的大部分可能会无效。使用只有WebKit支持的CSS属性的网页在基于WebKit的浏览器中会有非常出色的视觉效果和体验，并且在其他浏览器中也可能会有某些效果——至少不会有负面的影响。

1.简单的阴影

让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片，这两个效果都是使用CSS添加的。

1

<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />

上面的代码中，transform CSS 属性实现图片旋转，box-shadow属性为图片添加阴影效果。你可以改变旋转的角度，或者是阴影的参数，仅仅调整那些参数就OK了。

尝试一下，你将看到下面演示的旋转图片效果。

截图1.图片选择和阴影

上面的CSS写在一个img标签的style属性中，当然你可以把它们作为一个类放到一个style标签或独立的样式文件中。

过去，常常使用服务器端代码来处理图片以实现阴影效果，现在使用简单的CSS样式你就可以在客户端浏览器中实现它，而且看起来很棒。

2.翻转与弹出

下一个示例将演示当你把鼠标放到一张图片上时，它会弹出的效果。实现这些只需要使用一个hover样式和一个度数改变。该效果的CSS如下所示。

1
2
3
4

<style>
	img { -webkit-transform: scale(0.5); }
	img:hover { -webkit-transform: scale(1); }
</style>

1

<img src="megan.jpg" />

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!