用于WebKit的CSS诀窍[译]
作者:vocal 来源:前端观察 发布时间:2009-03-11 20:03:00
标签:css,浏览器,Safari,Chrome,WebKit
使用在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扩展你就可以在浏览器中实现它,而且看起来很棒。
0
投稿
猜你喜欢
- 如果需要在查询语句返回的列中包含一列表示该条记录在整个结果集中的行号, ISO SQL:2003 标准提出的方法是提供 ROW_NUMBER
- 使用SQL SERVER的[导入]功能,便可将access数据转换,但要注意原来的'自增字段'需要修改,将相应字段标识修改为
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA
- 如果你只使用一个更新日志,你只须清空日志文件,然后移走旧的更新日志文件到一个备份中,然后启用新的更新日志。用下列方法可以强制服务器启用新的更
- 当我们建好数据库及表后,首先想到的就是向数据库的表中输入数据.下面我们就来探讨一下如何向数据库增加数据:1.常用的方法是insert语句in
- 现在正在搞三层开发,用ASP和VB6.0,但是现在苦于没有找到合适的方法来调试自己写的DLL文件,效率相当低。 &n
- 一). ubuntu下mysql安装布局:/usr/bin  
- 如何制作一个安全的页面?随后,让我们来编程:manage.asp' 登录页面<%@ Language=VB
- MySQL 拥有一个复杂的但直观易学的 SQL 接口。这个章节描述了各种不同的命令、类型和函数,为了高效地使用 MySQL 需要了解它们。这
- 阅读上一篇教程:WEB2.0网页制作标准教程(9)第一个CSS布局实例如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐
- mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数据库
- 方法如下: response.cookies(cookiesname)[(key)|.attribute]=value 解释如下:cooki
- replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(st
- 前边看到有人发了个层打开效果,总感觉不是很理想 个人认为:-),如果那个层放到固定的容器里面估计就会出现问题的。今天自己来写个,可以支持 在
- 客户用的数据库是mysql,而研发好的产品支持oracle,为了让客户掏腰包,我们必须把数据库环境从oracle转向mysql。我们在转换的
- 这篇论坛文章(赛迪网技术社区)主要介绍了一些特别有用但文档中没有介绍的sql server DBCC命令,详细内容请参考下文:以下是一些sq
- Mysql数据库常用命令:启动Mysql数据库C:》cd Mysql5.0 binC:Mysql5.0 bin》mysqld –instal
- 本文介绍了使用xmlhttp处理远程文件数据、或采集文章时,对对方网页编码的处理方法。因为使用ajax的xmlhttp网页编码处理不当很容易
- 二进制转字符串入口参数:字节流函数返回:字符串Code By:Madpolice利用 ADODB.Stream 对象,速度比原来
- <!--#include file="conn/conn.asp"--> <% set Newslis