CSS3属性box-shadow图层阴影效果使用教程
作者：帕兰 来源：帕兰映像 发布时间：2010-05-16 14:54:00
标签：CSS3,box-shadow,教程
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。
1. box-shadow属性的浏览器兼容性
先来看一个这个属性的浏览器兼容性:
Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。
firefox通过私有属性-moz-box-shadow支持。
Safari和Chrome通过私有属性-webkit-box-shadow支持。
所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。
2. box-shadow属性的语法
box-shadow有六个可设值:
img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 }
当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。
X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。
阴影大小、扩展、颜色和Photoshop里面的都同理。
3. 实例解析
让我们通过几个实例来看一个box-shadow的效果，先弄个简单的html供测试：
<html>
<head>
<style type="text/css">CSS部份写在这里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>请注意:为了省事儿，下面的CSS代码中只写了box-shadow，在实际使用中，你应该把-moz-box-shadow和-webkit-shadow也写上。你需要做的很简，复制两个box-shadow,在它们前面分别加上-moz-和-webkit-。
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
0
投稿猜你喜欢
最近，我有机会研究对视觉设计作用的常见误解，这些误解仍然盛行于行政主管、产品主管，工程经理和市场专家中。设计团队成员如何说明这些认识是错误的- 之前写过的组织结构和组织体系都太抽象了，读到标签系统我才有那种“略懂”的感觉。哈哈…书上提到的标签包括：导航情境式链接：常见的“更多”这种用
- 如何显示数据库的结构？<html><head><meta http-equiv="Cont
- 代码如下:'个人代码风格注释（变量名中第一个小写字母表表示变量类型） 'i:为Integer型; 's:为Strin
- 一、在访客的内心深处做导航我讨厌迷失，不管是在道路上或是在线网络上。猜想一下？您的访客也是这样的。就像我们期望看到的道路上的路标一样，来帮助
- 这个效果前些日子有人在论坛问起，今天有空研究了下。我打了原创标记，因为我在写这个方法时的确没有参考过别人的代码。我的方法其实就是层遮罩加AL
- 最近试用mysql proxy，遇到若干问题，好在一一找到了解决方案，列出来备忘。这次使用的版本是0.6.x，也许新版本就没有这些问题了。无
- 从业这几年，自己写过的和帮人参谋的所谓“设计规范”不少了，这个东西大概在中国的决策层眼里是这么回事儿 - 一帮农民在一块田里种粮食，起先天气
- 如何对设计进行评判，一定有很多答案，有利有弊。问100位设计师，会得到100种回答。用线上PV、UV等数据说话，更多受产品属性、运营动作影响
- 对于使用虚拟主机的站长朋友，我们可能不知道该服务器是否安装了某种我们需要的组件。这时我们可以使用下面的代码来判断。该函数功能:检查是否存在系
- 小编语：小编我最早使用的网页制作工作就是FrontPage啦，FrongPage方便简单，会用Word就能做网页。如果你对网页制作要求不高，
- 如何在网站上提供音乐下载？为用户提供歌曲下载，一般有两种方式，一是直接通过Http，浏览器下载，二是通过ftp协议下载。我们来用Http和浏
- 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Oper
- 1、注册时验证数据库用户名是否存在。 2、输入密码时提示密码强度和验证2次密码输入是否一样。 3、注册时验证数据库联系邮箱是否存在。 4、注
- 原则一：注意WHERE子句中的连接顺序： ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE
- 写入：1:把gif图像文件读入内存（一个变量strTemp）。2:写入数据库。Dim binTmp() As ByteDim conn As
- 作业备份，不是备份数据库，是备份作业。 我的方法是把作业导出成文件备份起来，因为当你服务器维护的多了的时候很多你的作业 就很成问题，很麻烦。
- 我们开发数据库应用时，常常需要用到模糊查询。如果同一个条件需要匹配很多字段怎么办呢？通常，程序员会每个字段都在SQL中“field like
- 我想大多数的人在编写ASP程序的时候，都碰到过类似的错误信息： Error Number ->
- 对于windows平台来说安装完MySQL后,系统就已经默认生成了许可表和账户，你不需要像在Unix平台上那样执行 mysql_instal
