css3 box-shadow

admin發表於2018-07-21
CSSS3

 box-shadow屬性理解和應用起來稍稍有一點難度，只要切入點得當，還是比較容易掌握的。

屬性的命名必然和其功能有內在聯絡，從名稱進行理解，box-shadow可以分拆為兩個單詞：

（1）.box：盒容器，例如div或者p建立的容器盒子。

（2）.shadow：影子，這裡更準確的說是投影。

由此大致得出此屬性核心作用使用規定元素的投影效果。

 box-shadow屬性與text-shadow屬性類似，具體參閱CSS3 text-shadow一章節。

語法結構:

[CSS] 純文字檢視 複製程式碼
box-shadow:h-shadow v-shadow blur spread color inset;

引數解釋:

（1）.h-shadow：必需，設定元素陰影水平偏移量，可以為負值，單位是畫素。

（2）.v-shadow：必需，設定元素陰影垂直偏移量，可以為負值，單位是畫素。

（3）.blur：可選，陰影模糊半徑，只能夠為正值，如果為0，表示不具有模糊效果，單位畫素。

（4）.spread：可選，陰影的擴充套件半徑尺寸，可以為負值，單位是畫素。

（5）.color：可選，設定陰影的顏色；省略此引數，瀏覽器選取預設顏色，瀏覽器的預設可能不同，有的為透明。

（6）.inset：可選，可以將外部陰影改為內部陰影。

特別說明：blur和spread較為複雜一些，具體參閱box-shadow 模糊半徑與擴充套件半徑一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼只設定了陰影的水平和垂直偏移量，並沒有模糊效果，同時沒有設定陰影的顏色，那麼瀏覽器就會選取預設顏色，各個瀏覽器之間會有所不同，有的是黑色，有的是透明，不建議預設此屬性。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼設定了div的陰影偏移量和陰影的顏色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px 10px red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼設定了div陰影的水平和垂直偏移量、模糊半徑和陰影的顏色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:50px 50px 10px 10px red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼設定了div陰影的水平和垂直偏移量、模糊半徑、陰影擴充套件半徑和陰影的顏色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:30px 10px 10px 10px red inset;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼可以給div設定為內陰影，並且設定了其他引數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px;
  background-color:green;
  box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

可以設定多重陰影效果，每組資料用逗號分隔即可。

特別說明：

（1）.陰影的層疊優先順序從左向右遞減，也就是左側的能夠覆蓋右側的；同時陰影層疊優先順序低於元素內容層。

（2）.對於外部陰影，優先順序低於background-color圖層，內部陰影則相反。

元素各層圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/011355kl2swiyl62w6irhx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

擴充套件閱讀：box-shadow不佔據空間一章節。

相關文章