©
This document uses PHP Chinese website manual Release
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默认值:none
适用于:所有元素
继承性:无
动画性:是,除了内、外阴影切换时
计算值:指定值
none:
无阴影
<length>①:
第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④:
如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>:
设置对象的阴影的颜色。
inset:
设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
可以设定多组效果,每组参数值以逗号分隔。
对应的脚本特性为boxShadow。
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit- |
4.0-12.0 -moz- #1 | ||||||||
9.0+ | 4.0+ | 10.0+ | 5.1+ | 10.5+ | 5.0+ | 4.0+ | 18.0+ |
Firefox从13.0开始移除对-moz-
的支持,仅支持标准的 <' box-shadow '> 写法,在4.0-12.0区间,两种方式都支持。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>box-shadow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test li { margin-top: 20px; list-style: none; width: 400px; padding: 10px; background: #eee; } .test .outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); } .test .outset-blur { box-shadow: 5px 5px 5px rgba(0, 0, 0, .6); } .test .outset-extension { box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); } .test .inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; } .test .multiple-shadow { box-shadow: 0 0 5px 3px rgba(255, 0, 0, .6), 0 0 5px 6px rgba(0, 182, 0, .6), 0 0 5px 10px rgba(255, 255, 0, .6); } </style> </head> <body> <ul class="test"> <li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li> <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li> <li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li> <li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li> <li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例