WebKit中可用的CSS高级特性


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

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

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

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

注意: 你在本文中看到的-webkit前缀是一个浏览器生产商通常使用的一种方式,它暗示该CSS属性或规则尚未成为W3C标准的一部分。比如,box-shadow属性还只是开发中的CSS3标准的一部分。基于Mozilla的浏览器使用-moz前缀。

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" />

鼠标滑过图片,它就会弹出并变大,如下所示。

截图2.翻转后的图片

将鼠标从图片上挪开,图片又会恢复原状。

截图3.翻转之前的图片

正如你所能看到的那样,你可以使用几行CSS来实现这个效果。



相关阅读:
用PHP实现POP3邮件的收取
一些常用的JS功能函数(2009-06-04更新)
asp.net 纯真ip库取得所在地实现代码
简析ORACLE数据库结构
JS 自动完成 AutoComplete(Ajax 查询)
有C# 来实现WEB服务器的应用分析
Javascript insertAfter() 实现函数代码
js文字链接的热点提示效果代码
实战:全面了解SQLServer注入过程
简单谈论Visual Basic.NET传输表空间
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
一个多表查询引出的问题
jquery(1.3.2) 高亮选中图片边框
Javascript实现的CSS代码高亮显示
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 陈生铠群诗词选--之--【英雄何时归】 作文参赛宣言 守财奴老爸和爱花钱老妈(转载)作文1200字 梦想奔跑 小学三年级作文450字:游虞山 九九重阳节发言稿 最温馨的生日贺卡祝福语 我愿化作一片雪花150字作文 多变的爸爸作文450字 莎士比亚《麦克白》读后感范文精选 2015个人年度工作小结 温哥华冬天不下雪 爱情就象鬼,相信的人多,见到的人少 河——流 2013年最新客服部经理述职报告 假如世界上没有了书籍作文400字 寒意打湿我的文字 九月份培训工作计划 聘用合同范本【最新版】 忍, 如果我只是爱你 上半年党委组织部工作总结 关于西部农村基础教育调查报告 地球一小时有感400字 2015年终总结格式 四季的脚步作文800字 《万年牢》教学建议 描写“秋天”的优美段落 2015加法教学反思 大学生期末自我鉴定(大一第一学期) 晚清的电报趣事 建设和谐社区演讲稿 学习贯彻十七大精神:推动科学发展 促进社会和谐 四月春午给爱的十封情书 清明节作文:清明节想说的话 小狗“皮皮” 歇后语大全及答案六年级 请不要让妈妈知道 送征衣·过韶阳 游厦门科技馆 健康无价作文500字 夸美女的俏皮话 中队干部竞选自荐书 细水长流、我们才承诺! 《魔法师的帽子》读后感作文800字 暑假家教的实践报告 我的夏令营生活(1)400字 六年一班的那些娃儿(1) 喜迎建国60周年,文明交通我参与作文1200字 读《辉煌共和国》有感作文800字

Copyright © 2016 phpStudy |