用于WebKit的CSS诀窍[译]
作者:vocal 来源:前端观察 时间:2009-03-11 20:03:00
使用在Safari和WebKit中可用的CSS高级特性,你可以为你的网站和网络应用带来一个新的级别的令人兴奋的东西。WebKit是Safari浏览器和Google Chrome的渲染引擎。
因为浏览器会简单的无视他们不支持的CSS属性,所以在其他浏览器中,这些秘诀中的大部分可能会无效。使用只用WebKit支持的属性的网页在基于WebKit的浏览器中会有非常出色的视觉和体验,并且在其他浏览器中也会有某些效果。
注意: 你在本文中看到的-webkit前缀是一个浏览器生产商通常使用的一种方式,它暗示该CSS属性或规则尚未成为W3C标准的一部分。比如,box-shadow属性还只是开发中的CSS3标准的一部分。基于Mozilla的浏览器使用-moz前缀。
简单的阴影
让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片,这两个效果都是使用CSS添加的。
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上面的代码中,transform CSS 属性实现图片旋转,box-shadow属性为图片添加阴影效果。你可以改变旋转的角度,或者是阴影的参数,仅仅调整那些参数就OK了。
尝试一下,你将看到下面演示的旋转图片效果。
截图1.图片选择和阴影
上面的CSS是在一个style属性中,当然你可以把它们作为一个类放到一个style标签或独立的样式文件中。
过去,服务器端代码常常被请求用来处理图片来实现阴影效果。现在使用CSS扩展你就可以在浏览器中实现它,而且看起来很棒。
标签:css,浏览器,Safari,Chrome,WebKit
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
OpenSearch 初探
2008-06-19 12:06:00
![](https://img.aspxhome.com/file/UploadPic/20086/19/2008619121131785s.png)
MySQL中SQL的单字节注入与宽字节注入
2009-03-25 14:49:00
JavaScript 各种动画渐变效果
2008-09-02 10:38:00
asp如何在刷新链接之前验证文件是否存在?
2010-06-22 21:09:00
玩体验,先忘掉自己
2010-01-30 13:36:00
![](https://img.aspxhome.com/file/UploadPic/20101/30/resolutions1-82s.png)
编写和优化SQL Server的存储过程
2009-04-13 10:13:00
SQL语句练习实例之七 剔除不需要的记录行
2011-11-03 16:50:51
asp生成一个不重复的随机数字
2007-09-12 19:12:00
javascript数组取交集
2010-07-15 12:14:00
通过VB6将ASP编译封装成DLL组件最简教程 附全部工程源文件
2012-11-30 20:20:50
![](https://img.aspxhome.com/file/UploadPic/201211/30/20121130204550576s.png)
富文本编辑器的基本原理与实践
2008-06-13 13:28:00
asp如何编写翻页函数?
2009-11-07 18:46:00
Access2000迁移到Oracle9i要点
2010-07-27 13:10:00
IE6实现min-width
2008-06-12 12:40:00
并行查询让SQL Server加速运行
2009-03-16 16:31:00
详解MySQL数据库之更新语句
2010-08-08 09:15:00
ASP 高级模板引擎实现类
2011-03-25 10:54:00
泛泛而谈界面视觉效果的一致性
2010-01-05 17:05:00
![](https://img.aspxhome.com/file/UploadPic/20101/11/0912-ui-conformity-5-22s.jpg)
asp如何读取注册表的信息?
2009-11-19 21:18:00
Asp 操作Cookies(包括设置[赋值]、读取、删除[设置过期时间])
2011-03-10 11:06:00