更多"Try it Yourself"下面的例子。
定义和用法
箱阴影属性附加的一个或多个阴影的元件。
默认值: | none |
---|---|
遗传: | no |
动画: | yes. Read about animatable Try it |
版: | CSS3 |
JavaScript语法: | object .style.boxShadow="10px 20px 30px blue" Try it |
浏览器支持
在表中的数字规定,完全支持该属性的第一个浏览器版本。
其次是-webkit-号码或-moz-指定用一个前缀工作的第一个版本。
属性 | |||||
---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- | 9 | 4 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
CSS语法
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Note:该箱阴影属性附加的一个或多个阴影的元件。 该物业是一个逗号分隔阴影列表,以2-4的长度值,可选颜色,以及一个可选的关键字插入每个指定。 省略长度为0。
属性值
值 | 描述 | 播放 |
---|---|---|
none | 默认值。 不显示阴影 | 播放 ” |
h-shadow | 需要。 水平阴影的位置。 允许使用负值 | 播放 ” |
v-shadow | 需要。 垂直阴影的位置。 允许使用负值 | 播放 ” |
blur | 可选的。 模糊距离 | 播放 ” |
spread | 可选的。 阴影的大小。 允许使用负值 | 播放 ” |
color | 可选的。 颜色的阴影。 默认值是黑色。 看看CSS颜色值可能的颜色值的完整列表。 注:在Safari (on PC)是必需的颜色参数。 如果不指定颜色,阴影不显示在所有。 | 播放 ” |
inset | 可选的。 从外侧阴影的阴影变化(outset)到内侧阴影 | 播放 ” |
initial | 将此属性设置为默认值。 阅读关于初始 | 播放 ” |
inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
扔在桌子上的图像
这个例子演示了如何创建"polaroid"照片和旋转照片。
相关页面
CSS3教程: CSS3边框
HTML DOM参考: boxShadow property