css中box-shadow盒子陰影

box-shadow盒子陰影

文法

外陰影：box-shadow: X軸  Y軸  Rpx  color;
屬性說明（順序依次對應）： 陰影的X軸(可以使用負值)    陰影的Y軸(可以使用負值)    陰影模糊值（大小）    陰影的顔色
内陰影：box-shadow: X軸  Y軸  Rpx  color  inset;
預設是外陰影        内陰影：inset 可以設定成内部陰
           

注意：

此屬性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用來設定文字陰影   如果設定文字陰影請參考知識點:text-shadow（同理）
 因為是新屬性，為了相容各主流浏覽器并支援這些主浏覽器的較低版本，基于主流浏覽器上使用box-shadow屬性時，我們需要将屬性的名稱寫成-webkit-box-shadow的形式。Firefox浏覽器則需要寫成-moz-box-shadow的形式
           

box-shadow盒取值

1. none：無陰影
2. length①：第 1 個長度值定義元素的陰影水準偏移值。正值，陰影出現在元素右側；負值，則陰影出現在元素左側
3. length②：第 2 個長度值定義元素的陰影垂直偏移值。正值，陰影出現在元素底部；負值，則陰影出現在元素頂部
4. length③：第 3 個長度值定義元素的陰影模糊值半徑（如果提供了）。該值越大陰影邊緣越模糊，若該值為0，陰影邊緣不出現模糊。不允許負值
5. length④：第 4 個長度值定義元素的陰影外延值（如果提供了）。正值，陰影将向四面擴充；負值，則陰影向裡收縮
6. color：定義元素陰影的顔色。如果該值未定義，陰影顔色将預設取目前最近的文本顔色
7. inset：定義元素的陰影類型為内陰影。該值為空時，則元素的陰影類型為外陰影‘