css box-shadow属性 CSS3 box-shadow 属性

css box-shadow属性

CSS box-shadow 属性允许开发者为元素添加阴影效果，它可以让元素看起来更加立体，也可以用来制作一些有趣的效果。box-shadow 属性是 CSS3 中新增的属性，它有多个参数，可以用来控制阴影的位置、大小、颜色等。

box-shadow: h-offset v-offset blur spread color inset;

h-offset 和 v-offset 是水平偏移量和垂直偏移量，它们决定阴影在水平方向和垂直方向上的位置。blur 是模糊半径，它决定阴影的大小；spread 是扩散半径，它决定阴影的厚度。color 是颜色；inset 是内凹或外凸标志，如果不写则默认为外凸。

box-shadow: 10px 5px 5px 0px rgba(0,0,0,0.75);

上面这行代码表明了水平偏移量为 10px ，垂直偏移量为 5px ；模糊半径为 5px ；扩散半径为 0px ；颜色是 rgba(0,0,0,0.75) （也就是 75% 的不透明度的黑色）。这样一来就会在元素的右侧 10px 处、下侧 5px 处生成一个大小为 5px 的、 75% 不透明度的黑色阴影。

CSS3 box-shadow 属性

CSS3 box-shadow 属性

实例

向 div 元素添加阴影：

div
{
box-shadow: 10px 10px 5px #888888;
}

在本页底部查看更多实例。

---

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-image	10.0 -webkit-	9.0.0	4.0 (2.0)[3] 3.5(1.9.1) -moz	5.1[1] 3.0 -webkit	10.5[1] -o-

---

属性定义及使用说明

box-shadow属性可以设置一个或多个下拉阴影的框。

默认值:	none
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxShadow="10px 10px 5px #888888"

---

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

---

在线实例

旋转图像
这个例子演示了如何创建"polaroid"的照片和旋转图片。

---

相关文章

CSS3 教程: CSS3 Borders