box-shadow

语法

  • 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>
<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>