WebKit中能用的CSS高級特点

日期:2021-03-15 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站


WebKit是Safari和Google Chrome访问器的3D渲染模块。因此,本文中的技巧在Safari3/4和Chrome1.0/2.0中全是适用的。
应用在WebKit中能用的CSS高級特点,能够为你的网站或互联网运用带来1个新的更让人激动的物品。
在阅读文章下面文章内容前,你能够先掌握下脚本制作之家之前详细介绍的WebKit文章内容:访问器Apple Safari和Google Chrome核心webkit
WebKit是Safari和Google Chrome访问器的3D渲染模块。因此,本文中的技巧在Safari3/4和Chrome1.0/2.0中全是适用的。
由于访问器会简易的疏忽她们不适用的CSS特性,因此在别的访问器中,这些技巧中的绝大多数将会会失效。应用仅有WebKit适用的CSS特性的网页页面在根据WebKit的访问器中会有十分优异的视觉效果实际效果和体验,而且在别的访问器中也将会会有一些实际效果——最少不容易有负面的危害。
留意: 你在本文中看到的-webkit前缀是1个访问器生产制造商一般应用的1种方法,它暗示该CSS特性或标准并未变成W3C规范的1一部分。例如,box-shadow特性还只是开发设计中的CSS3规范的1一部分。根据Mozilla的访问器应用-moz前缀。 1.简易的黑影
让大家从向你展现为网页页面中的随意元素加上黑影实际效果是多么的的简易刚开始吧。下面的编码片断将演试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下,你将看到下面演试的转动照片实际效果。

截图1.照片挑选和黑影
上面的CSS写在1个img标识的style特性中,自然你能够把它们做为1个类放到1个style标识或单独的款式文档中。
以往,经常应用服务器端编码来解决照片以完成黑影实际效果,如今应用简易的CSS款式你便可以在顾客端访问器中完成它,并且看起来很棒。 2.旋转与弹出
下1个示例将演试当你把电脑鼠标放到1张照片上时,它会弹出的实际效果。完成这些只必须应用1个hover款式和1个度数更改。该实际效果的CSS以下所示。
1 2 3 4
<style> img { -webkit-transform: scale(0.5); } img:hover { -webkit-transform: scale(1); } </style>
1
<img src="megan.jpg" />
电脑鼠标滑过照片,它就会弹出并增大,以下所示。

截图2.旋转后的照片
将电脑鼠标从照片上挪开,照片又会修复原状。

截图3.旋转以前的照片
正如你所能看到的那样,你可使用几行CSS来完成这个实际效果。
上1页12 3 4 下1页 阅读文章全文