盒子陰影

圓角邊框

1. border-radius屬性用於設置元素的外邊框圓角

   • border-radius:length;

   • radius半徑（圓半徑）原理：圓與邊框的交際造成圓角效果。

   • 圓的作法

     • 首先，作一個正方形的div

     • 其次，讓border-radius的值等於div寬度的通常，或者等於50%

     • div{
                    width: 300px;
                    height: 300px;
                    border-style: solid;
                    border-color: aqua;
                    /* border:10px; */
       
                    /* background-color:pink; */
                    border-radius: 50%;/*或者是div*/
                    margin: auto;
                }

   • 圓角矩形作法

     • 首先，作一個矩形div

     • 而後讓border-radius值等於高度的一半

     • div{
           width：300px；
           height：150px；
           background-color;gray;
           border-radius:75px;
       }

盒子陰影

1. 使用box-shadow屬性爲盒子添加陰影

2. box-shadow:h-shadow v-shadow blur spread color inset;

   值	描述
   h-shadow	必須。水平陰影的位置，容許負值
   v-shadow	必須。垂直陰影的位置。容許負值
   blur	可選，橫糊距離
   spread	可選陰影尺寸
   color	可選。陰影顏色。參考CSS顏色值
   inser	可選。將外部陰影（outset）改成內部陰影。

   【注意】

   • 默認的是外陰影（outset），可是不能夠寫這個單詞，不然致使陰影無效

   • 盒子陰影不佔用空間，不會影響其餘盒子排列

   • 鼠標通過時顯示陰影

     • div{
                   width: 200px;
                   height: 200px;
                   background-color: gray;
                   margin: auto;
       
               }
               div:hover{
                   box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
               }

文字陰影

1. 使用text-shadow屬性將陰影應用於文本

2. text-shadow：h-shadow v-shadow blur color；

   值	描述
   h-shadow	必須，水平陰影的位置，容許負值
   v-shadow	必須。垂直陰影的位置。容許負值
   blur	可選。模糊的距離
   color	可選。陰影的顏色。參考CSS顏色值

   【】不經常使用。