css中的box-shadow你真的瞭解嗎？學浪計劃

相信大家對於box-shadow這個屬性都應該很清楚，那就是給元素添加陰影的，今天我們就來詳細的說一下這個屬性。

首先來看語法：

<code>box-shadow: h-shadow v-shadow blur spread color inset;/<code>

h-shadow ：必需的。水平陰影的位置。允許負值

v-shadow ：必需的。垂直陰影的位置。允許負值

blur ：可選。模糊距離

spread： 可選。陰影的大小

color：可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表

inset：可選。從外層的陰影（開始時）改變陰影內側陰影

box-shadow最少為兩個參數：即h-shadow和v-shadow，大家可以理解為x和y軸的概念。

向元素添加單個 box-shadow 效果時使用以下規則：

• 當給出兩個、三個或四個 值時。如果只給出兩個值, 那麼這兩個值將會被當作 來解釋。如果給出了第三個值, 那麼第三個值將會被當作解釋。如果給出了第四個值, 那麼第四個值將會被當作來解釋。
• 可選，inset關鍵字。
• 可選，值。

完整順序

<code> = inset? && {2,4} && ?/<code>

屬性實例講解

<code>img{box-shadow:10px 10px}/<code>

這裡只設置了必須的兩個參數，設置陰影為10px，沒有背景色則默認為黑色，注意這兩個參數如果設置為負數，則是相反的方向出現陰影,如下：

<code>img{box-shadow:-10px,-10px}/<code>

blur參數

此參數用來設置模糊距離，不能為負數。

<code>img{box-shadow:-10px -10px 20px;}//設置blur為20px/<code>

spread參數

此參數用來設置陰影的大小。

<code>img{
  box-shadow:-10px -10px 20px 20px;
}/<code>

color參數

此參數設置陰影的顏色。

<code>img{
  box-shadow:-10px -10px 20px 20px gold;
}/<code>

inset參數

此參數設置陰影向內。

<code>div{box-shadow:-10px -10px 20px 20px gold inset;}/<code>

注意內陰影對圖片無效的，所以我用div代替。

實戰

1.如果想要全部邊緣都要陰影元素，直接把x和y設置為0即可。

<code>div{box-shadow:0px 0px 20px 10px green;}/<code>

2.一個元素可應用多個陰影效果。

<code>div{box-shadow:10px 10px 10px red,-10px -10px 10px green;}/<code>

3.鏤空效果

html

<code>
   

/<code>

css

<code>.shadow{
  overflow: hidden;
  position: relative;
  width:400px;
}
img{
  width:400px;
}
.mark{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.mark i{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60px;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4);
}/<code>

效果：