怎樣給邊框添加陰影？CSS3屬性box-shadow幫你搞定！

作者:WangMin
格言:努力做好自己喜歡的每一件事

關於box-shadow屬性，有的小伙伴可能用的時候直接復制已有的，並沒有仔細了解過box-shadow屬性的參數分別是什么含義，最后導致陰影的樣式不能按照自己的需求自由控制，讓自己很苦惱。接下就一起來好好學習這個屬性吧！！

box-shadow屬性的參數

此屬性的基本語法：{ box-shadow:[inset] x-offset y-offset blur-radius spread-radius color }。

1、inset [ 陰影類型 ]

這個參數是一個可選參數。如不聲明，默認陰影類型是外陰影；如果取它的唯一值 "inset" ，則陰影類型為內陰影。它可以作為第一個參數出現，也可以作為最后一個參數出現。默認情況下代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

當設置了陰影類型為 "inset" 時，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

2、x-offset [ 陰影水平偏移量 ]

這個參數的取值分為兩種情況：可以是正值，也可以是負值。

為正值的情況下，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:5px 0px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:5px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:5px 0px 5px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：x-offset的取值如果為正值時，則陰影在元素的右邊。

為負值的情況下，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:-5px 0px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:-5px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:-5px 0px 5px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：x-offset的取值如果為負值時，陰影在元素的左邊。

3、y-offset [ 陰影垂直偏移量 ]

這個參數的取值與x-offset的取值是一樣的。分為兩種情況：可以是正值，也可以是負值。

為正值的情況下，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:0px 5px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：y-offset的取值如果為正值時，則陰影在元素的底部。

為負值的情況下，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:0px -5px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:0px -5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:0px -5px 5px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：y-offset的取值如果為負值時，則陰影在元素的頂部。

4、blur-radius [ 陰影模糊半徑 ]

這個參數是一個可選參數，代表陰影的模糊半徑，取值分為兩種情況：0 或者正值。此外該值不支持負數。

值為0的情況下，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:5px 5px 0px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:5px 5px 0px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:5px 5px 0px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：blur-radius的取值如果為0時，則陰影不具有任何模糊效果。

值為其他正數的情況下，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：blur-radius的取值如果為正數時，則陰影具有模糊效果。並且這個值越大，陰影的邊緣就越模糊。

5、spread-radius [ 陰影擴展半徑 ]

這個參數是一個可選參數，代表着陰影的尺寸。這個值可以被看作是從元素到陰影的距離。如果正值會在元素的四個方向延伸陰影；負值會使陰影變得比元素本身尺寸還要小，甚至被元素遮住。

當為默認值“0”的時候，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：spread-radius的取值為0時，則會讓陰影變得和元素的大小一同等大小。

當為任意正值的時候，代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:0px 0px 5px 5px rgba(0,0,0,0.75);
	-webkit-box-shadow:0px 0px 5px 5px rgba(0,0,0,0.75);
	-moz-box-shadow:0px 0px 5px 5px rgba(0,0,0,0.75);
}

網頁顯示效果如下：

從上述例子中可以得到一個結論：spread-radius的取值為任意正值時，則會在元素的四個方向延伸對應大小的陰影

6、color [ 陰影顏色 ]

這個值是指定陰影的顏色，是一個可選參數。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致。代碼如下：

<div class="box color1"></div>
<div class="box color2"></div>
.box{
   width:100px;
   height:100px;
   background:#69f;
   margin:20px 0 0 20px;
}
.color1{
   box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
   -webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
   -moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.75);
}
.color2{
   box-shadow:5px 5px 5px 0px #f00;
   -webkit-box-shadow:5px 5px 5px 0px #f00;
   -moz-box-shadow:5px 5px 5px 0px #f00;
}

網頁顯示效果如下：

使用box-shadow屬性設置各種陰影效果

1、給一個元素四邊設置陰影

如果需要給一個元素四邊設置陰影時，需要將x-offset和y-offset的偏移量設置為0，只需要設置陰影模糊半徑和陰影顏色，陰影擴展半徑按照自己需求設置。代碼如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:#69f;
	box-shadow:0px 0px 5px #f00;
	-webkit-box-shadow:0px 0px 5px #f00;
	-moz-box-shadow:0px 0px 5px #f00;
}

網頁顯示效果如下：

2、給一個元素四邊設置不同顏色的陰影

如果需要給一個元素四邊設置不同顏色的陰影時，陰影之間用逗號分隔。給對象四邊設置不同的陰影效果，通過改變x-offset和y-offset的正負值來實現，左邊陰影 將x-offset設置為負值；右邊陰影 將x-offset設置為正值；底部陰影 將y-offset設置為正值；頂部陰影 將y-offset設置為負值。案例如下：

<div class="box"></div>
.box{
width:100px;
height:100px;
background:#69f;
box-shadow:-5px 0px 5px #f00,
	   5px 0px 5px blue,
  	   0px -5px 5px yellow,
  	   0px 5px 5px #000;
-webkit-box-shadow:-5px 0px 5px #f00,
		   5px 0px 5px blue,
		   0px -5px 5px yellow,
		   0px 5px 5px #000;
-moz-box-shadow:-5px 0px 5px #f00,
		 5px 0px 5px blue,
		 0px -5px 5px yellow,
		 0px 5px 5px #000;
}

網頁顯示效果如下：

3、給元素設置多重陰影

當給同一個元素使用多個陰影屬性時，需要注意它的順序，陰影將按照設置的順序從里往外顯示；還需要注意的一點是必須設置陰影擴展半徑，並且按照設置的順序，陰影擴展半徑的值要依次遞增。代碼如下：

<div class="box"></div>
.box{
     width:100px;
     height:100px;
     background:#69f;
     margin:20px 0 0 20px;
     box-shadow: 0px 0px 3px 3px pink,
                 0px 0px 3px 6px yellow,
                 0px 0px 3px 9px orange;
     -webkit-box-shadow: 0px 0px 3px 3px pink,
                 0px 0px 3px 6px yellow,
                 0px 0px 3px 9px orange;
     -moz-box-shadow: 0px 0px 3px 3px pink,
                 0px 0px 3px 6px yellow,
                 0px 0px 3px 9px orange;
 }

網頁顯示效果如下：

4、其他特殊效果:立體投影

立體投影的關鍵點在於使用偽元素::before和::after生成大小與父元素相近的元素，然后對其進行 rotate 以及定位到合適位置，再給為元素設置陰影。

立體效果1，代碼如下：

<div class="box"></div>
.box {
   position: relative;
   width: 350px;
   height: 150px;
   background: pink;
}
.box::before,.box::after{
   content: "";
   width: 300px;
   height: 75px;
   position: absolute;
   top:60px;
   z-index:-1;
   background: palevioletred;
   box-shadow: 0 0 10px 10px palevioletred;
   -webkit-box-shadow: 0 0 10px 10px palevioletred;
   -moz-box-shadow: 0 0 10px 10px palevioletred;
}

.box::before {
   left: 18px;
   transform: rotate(-6deg);
   -webkit-transform: rotate(-6deg);
   -moz-transform: rotate(-6deg);
}
.box::after {
   right: 18px;
   transform: rotate(6deg);
   -webkit-transform: rotate(6deg);
   -moz-transform: rotate(6deg);
}

網頁顯示效果如下：

立體效果2，代碼如下：

<div class="box"></div>
.box {
    position: relative;
    width: 350px;
    height: 150px;
    background: pink;
}
.box::before,.box::after{
    content: "";
    width: 150px;
    height: 100px;
    position: absolute;
    top:26px;
    z-index: -1;
    background: palevioletred;
    box-shadow: 0 0 10px 10px palevioletred;
    -webkit-box-shadow: 0 0 10px 10px palevioletred;
    -moz-box-shadow: 0 0 10px 10px palevioletred;
}

.box::before {
    left: 0px;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg);
}
.box::after {
    right: 0px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
}

網頁顯示效果如下：

立體效果3，代碼如下：

<div class="box"></div>
.box {
    position: relative;
    width: 350px;
    height: 150px;
    margin:25px;
    background: pink;
}
.box::before,.box::after{
    content: "";
    width: 300px;
    height: 100px;
    position: absolute;
    top:26px;
    left:15px;
    z-index: -1;
    background: palevioletred;
}
.box::before {
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg);
    box-shadow: 10px -10px 10px 10px palevioletred;
    -webkit-box-shadow:10px -10px 10px 10px palevioletred;
    -moz-box-shadow: 10px -10px 10px 10px palevioletred;
}
.box::after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
    box-shadow: 10px 10px 10px 10px palevioletred;
    -webkit-box-shadow:10px 10px 10px 10px palevioletred;
    -moz-box-shadow: 10px 10px 10px 10px palevioletred;
}

網頁顯示效果如下：

box-shadow屬性的兼容性

為了兼容各主流瀏覽器並支持它們的較低版本，在基於Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，需要在屬性的名稱前加上-webkit-，寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要在屬性的名稱前加上-moz-，寫成-moz-box-shadow的形式。上面的案例中，我將box-shadow的兩種兼容格式都寫上了，所以在使用中不要忘記加上。以下是box-shadow在各個瀏覽器的兼容性。

---

以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!