box-shadow 屬性/樣式/取值/語法/格式寫法/簡寫/用法[CSS教程手冊]

語法：

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 '> 屬性

可以設定多組效果，每組參數(shù)值以逗號分隔。
對應的腳本特性為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-
	6.0-8.0	4.0-12.0 ^-moz- ^#1	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-
	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區(qū)間，兩種方式都支持。

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>box-shadow_CSS參考手冊_web前端開發(fā)參考手冊系列【CSS在線手冊-網(wǎng)站設計教程參考資料】</title>
<meta name="author" content="易網(wǎng),網(wǎng)站設計,網(wǎng)站制作,網(wǎng)站建設,www.dgyx668.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 id="384qrr4"    class="outset">外陰影常規(guī)效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
	<li id="lxsnd8r"    class="outset-blur">外陰影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
	<li id="ij8sdi3"    class="outset-extension">外陰影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
	<li id="tj3pavq"    class="inset">內陰影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
	<li id="8zzz3nr"    class="multiple-shadow">外陰影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
</ul>
</body>
</html>