CSS / box-shadow陰影效果

一、定義解釋

1、屬性

  box-shadow是css3的一個新屬性

2、參數

  box-shadow的六個參數

（1）h-shadow：必需、水準陰影的位置、允許負值 

（2）v-shadow：必需、垂直陰影的位置、允許負值

（3）blur：可選、模糊距離【既然是距離肯定就不會是負值，下面的也是一個道理】

（4）spread：可選、陰影的大小

（5）color：可選、陰影的顔色

（6）inset：可選、内陰影【不寫時預設是外陰影】

3、方向問題

  h-shadow：正值，顯示的位置是右側邊框的陰影

                     負值，顯示的位置是左側邊框的陰影

                      0，兩側都會顯示

  v-shadow：正值，顯示的位置是下側邊框的陰影

                     負值，顯示的位置是上側邊框的陰影

                      0，兩側都會顯示

即：X軸正直向右，Y軸正直向下，0值兩側都會顯示

二、具體參數解釋

這種知識點直接靠例子就可以掌握的比較清楚【這裡我所舉的例子大部分都是x，y軸的值都是正直，陰影也就是在右側和下側顯示】

1、隻用必填的參數，即隻寫X，Y軸【box-shadow:10px 10px】，預設顯示的是黑色

<div class="divOne"></div>
.divOne{
   width: 360px;
   height: 80px;
   background-color: green;
   border-radius: 15px;
   box-shadow:10px 10px;
}
           

 2、blur模糊距離【值越大，模糊距離越遠，越模糊；值越小，模糊距離越小，越清晰】

      圖一，模糊值是10px；圖二模糊值是50px

<div class="divOne"></div>
.divOne{
    width: 360px;
    height: 80px;
    background-color: green;
    border-radius: 15px;
    box-shadow:10px 10px 10px; // 圖一的參數
    box-shadow:10px 10px 50px; // 圖二的參數
 } 
           

 3、spread陰影的大小

  圖一，陰影值是10px；圖二陰影值是30px

<div class="divOne"></div>
.divOne{
    width: 360px;
    height: 80px;
    background-color: green;
    border-radius: 15px;
    box-shadow:10px 10px 10px 10px; // 圖一的參數
    box-shadow:10px 10px 10px 30px; // 圖二的參數
 } 
           

4、 color陰影的顔色，上面都是預設顔色黑色

<div class="divOne"></div>
.divOne{
  width: 360px;
  height: 80px;
  background-color: green;
  border-radius: 15px;
  box-shadow:10px 10px 10px 10px saddlebrown;
} 
           

 5、inset，設定陰影的類型，此值不寫的話預設就是外陰影，上面的例子沒有寫，顯示的就是外陰影，内陰影和外陰影的方向正好是相反的

<div class="divOne"></div>
.divOne{
  width: 360px;
  height: 80px;
  background-color: green;
  border-radius: 15px;
  box-shadow:10px 10px 30px 2px saddlebrown inset;
} 
           

 三、用途

上面的例子是為了說明功能而做的例子視覺效果可能不是很美好，下面舉幾個用box-shadow實作且視覺效果不錯的例子

（1）好看的邊框

<div class="divOne"></div>
.divOne{
  width: 360px;
  height: 80px;
  background:rgba(128, 128, 128, 0.8) ;
  border-radius: 15px;
  box-shadow:0px 0px 10px 2px saddlebrown inset;
} 
           

 （2）酷炫配色

<div class="divOne">百度網站歡迎您</div>
.divOne{
      font-size: 18px;
      width: 260px;
      height: 60px;
      border-radius: 15px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      // 圖一樣式
      box-shadow:0px -6px 0px 0px #ff0000,   /*上邊陰影*/
       -6px 0px 0px 0px #3bee17,   /*左邊陰影*/
       6px 0px 0px 0px #2279ee,    /*右邊陰影*/
       0px 6px 0px 0px #eede15;    /*下邊陰影*/
      // 圖二樣式
      box-shadow: 0 -4px 3px 0 rgba(252, 252, 252, 0.45), 0 5px 1px -1px rgba(252, 252, 
      252,0.4);
      // 圖三樣式
      box-shadow: 0 1px 3px 0 rgba(255,255,255,.2), 0 1px 1px 0 rgba(255,255,255,.14), 0 
      2px 1px -1px rgba(255,255,255,.12);
} 
           

借鑒文章部落格：

菜鳥教程：https://www.runoob.com/cssref/css3-pr-box-shadow.html

Mica：https://www.cnblogs.com/mica/p/11162404.html