没有合适的资源?快使用搜索试试~ 我知道了~
WebKit是Safari和Google Chrome浏览器的渲染引擎。所以,本文中的诀窍在Safari3/4和Chrome1.0/2.0中都是支持的。 使用在WebKit中可用的CSS高级特性,可以为你的网站或网络应用带来一个新的更令人兴奋的东西。 在阅读下面文章前,你可以先了解下软件开发网以前介绍的WebKit文章:浏览器Apple Safari和Google Chrome内核webkit WebKit是Safari和Google Chrome浏览器的渲染引擎。所以,本文中的诀窍在Safari3/4和Chrome1.0/2.0中都是支持的。 因为浏览器会简单的无视他们不支持的CSS属性,所
资源推荐
资源详情
资源评论
WebKit中可用的中可用的CSS高级特性高级特性
WebKit是Safari和Google Chrome浏览器的渲染引擎。所以,本文中的诀窍在Safari3/4和Chrome1.0/2.0中都是支持的。
使用在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
资源评论
weixin_38706197
- 粉丝: 2
- 资源: 979
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功