由Google搜尋頁引發對box-shadow的使用和技巧總結

          CSS3的box-shadow有點類似於text-shadow，只不過不同的是text-shadow是物件的文字設定陰影，而box-shadow是給物件實現圖層陰影效果。

 

text-shadow demo：

語法:

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊的距離。
color	可選。陰影的顏色。參閱 CSS 顏色值。

1、

h1 {
text-shadow: 5px 5px 5px #FF0000;
}

1 2 3 4 5 6 7

<h1>文字陰影效果!</h1>

 

box-shadow demo：

 

語法:

 

box-shadow: h-shadow v-shadow blur spread color inset;

 

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。
spread	可選。陰影的尺寸。
color	可選。陰影的顏色。請參閱 CSS 顏色值。
inset	可選。將外部陰影 (outset) 改為內部陰影。

 

1、

 

-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;
}

 

 

 

 

 

 

 

3、

 

box-shadow:5px 5px 5px #999 inset; 

 

 

4、

 

box-shadow:-5px -5px 5px #999 inset;