|
建站学为你搜集整理关于box-shadow 的详细介绍，希望能给你的学习带来帮助。与圆角border-radius属性一样，盒阴影box-shadow也是一个令人激动的属性。
首先我们先简单了解一下box-shadow 的一些情况：
W3C将box-shadow加入CSS3属性列表，并使其标准化，应该是件值得高兴的事。那么，box-shadow究竟是如何被人们所称道的？
如果你是前端工程师，你可能有过这些痛苦的经历：
- 面对到处都是圆角的设计稿；
- 面对到处都是圆角+阴影的设计稿；
- 面对到处都是圆角+阴影+半透明的设计稿。
如果你还没有接触过CSS3，或者你所负责的这个项目，必须兼容IE系列。那么，无论是面对上面的哪一点，都可以耗费你不少的精力和时间。
这里，我们搁下IE不谈，只谈谈box-shadow。
box-shadow属性至多有6个参数可以设置：
- 阴影水平偏移量：如果该参数为正值，则阴影在box的右边；如果该参数为负，则阴影在box的左边
- 阴影垂直偏移量：如果该参数为正值，则阴影在box的底部；反之，则在box顶部
- 阴影模糊距离（大小）：此参数可选，只能是正值。如果该参数值为0，则阴影的边缘犀利；该值越大，阴影的边缘越模糊
- 阴影扩展距离：此参数可选。如果该参数为正，则整个阴影都延展扩大；反之，则缩小。
- 阴影颜色：此参数可选。如果不写，则会选取默认颜色。至于默认颜色会是什么，不清楚（在webkit核心下为无色，即透明），建议不要省略该值。
- 阴影类型：此参数可选。有唯一值‘inset’，如果存在该值，那么阴影将为内阴影；如果不写该值，则为缺省的外阴影。
box-shadow的特征：
- 通过对阴影偏移量的设置，可以使得阴影出现在“上、右、下、左”任一方向；
- 阴影大小、边缘模糊、颜色可自定义；
- 可设置内阴影及外阴影；
- 可设置“多组”阴影。
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里面的都同理。
下面我们通过实例解析来看一下他的用法：
让我们通过几个实例来看一个box-shadow的效果，先弄个简单的html供测试:
<html>
<head>
<style type="text/css">CSS部份写在这里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
(责任编辑：admin) |
