CSS3的box-shadow有點類似于text-shadow,隻不過不同的是text-shadow是對象的文本設定陰影,而box-shadow是給對象實作圖層陰影效果。
text-shadow demo:
文法:
值
描述
h-shadow
必需。水準陰影的位置。允許負值。
v-shadow
必需。垂直陰影的位置。允許負值。
blur
可選。模糊的距離。
color
1、
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
1
2
3
4
5
6
7
<h1>文本陰影效果!</h1>
box-shadow demo:
可選。模糊距離。
spread
可選。陰影的尺寸。
可選。陰影的顔色。請參閱 CSS 顔色值。
inset
可選。将外部陰影 (outset) 改為内部陰影。
-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;
2、向 div 元素添加 box-shadow:
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
test
3、
box-shadow:5px 5px 5px #999 inset;
4、
box-shadow:-5px -5px 5px #999 inset;