天天看點

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

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

          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;

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

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

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

3、

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

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

4、

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

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