[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[边框属性](#)» 相关内容： [**其它边框属性参考**选择其它项](#) - [border](#) - [border-width](#) - [border-style](#) - [border-color](#) - [border-top](#) - [border-top-width](#) - [border-top-style](#) - [border-top-color](#) - [border-right](#) - [border-right-width](#) - [border-right-style](#) - [border-right-color](#) - [border-bottom](#) - [border-bottom-width](#) - [border-bottom-style](#) - [border-bottom-color](#) - [border-left](#) - [border-left-width](#) - [border-left-style](#) - [border-left-color](#) - [border-image](#) - [border-radius](#) - [border-top-left-radius](#) - [border-top-right-radius](#) - [border-bottom-right-radius](#) - [border-bottom-left-radius](#) - [box-shadow](#) - [box-reflect](#) # box-shadow - **版本：CSS3** - 继承性：无 ### 语法： **box-shadow**：none | [<shadow>](#) [ , [<shadow>](#) ]* **<shadow>** = inset? && [ [<length>](#){2,4} && [<color>](#)? ] **默认值**： none ### 取值： none：无阴影[<length>](#)①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值[<length>](#)②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值[<length>](#)③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值[<length>](#)④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值[<color>](#)：设置对象的阴影的颜色。inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影 ### 说明： **设置或检索对象阴影。**参阅[text-shadow](#)属性 - 可以设定多组效果，每组参数值以逗号分隔。 - 对应的脚本特性为**boxShadow**。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>较早版本</th> <td class="unsupport">6.0-8.0</td> <td rowspan="2" class="support">4.0</td> <td rowspan="2" class="support">5.1</td> <td rowspan="2" class="support">13.0</td> <td rowspan="2" class="support">11.50</td> </tr><tr><th>较新版本</th> <td class="support">9.0</td> </tr></tbody></table> ### 示例： - 外阴影常规效果 box-shadow:5px 5px rgba(0,0,0,.6); - 外阴影模糊效果 box-shadow:5px 5px 5px rgba(0,0,0,.6); - 外阴影模糊外延效果 box-shadow:5px 5px 5px 10px rgba(0,0,0,.6); - 内阴影效果 box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset; - 外阴影模糊效果 box-shadow:5px 5px 5px rgba(0,0,0,.6); Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved