box-shadow 詳解及示例

box-shadow  [bɑks] - [ˈʃædoʊ]

 

英文示意：

box：盒，包廂

shadow：陰影，漸變

 

定義：

box-shadow: none | <shadow> [,<shadow>]*

<shadow>: inset? && <length>{2,4} && color

• inset:內陰影，默認爲外陰影
• <length>--1:陰影的水平偏移量，正值陰影在右側，負值陰影在左側，必填
• <length>--2:陰影的垂直偏移量，正值陰影在底部，負值陰影在頂部，必填
• <length>--3:陰影的模糊距離，必須爲正值，值越大，陰影邊緣越模糊，非必填
• <length>--4:陰影的外延長度值，非必填
• color：陰影顏色

 

注：

• <length>必須爲具體的長度單位值，不可以使用百分比
• 能夠爲一個元素指定多個陰影
• 陰影的偏移基準值爲元素計算寬高，內邊距，邊框後的值

 

示例：

 

1).配合border-radius實現圓形陰影

 

box-shadow:20px 10px 5px 0px grey;
border-radius:50%

 

2).多重陰影實現多彩邊框（ 定義多個陰影時，先定義的陰影在後定義的陰影的上方）

box-shadow: 10px 0 #77ff8c,
                    -10px 0 #4e71ff,
                    0 10px #ff62d3,
                    0 -10px #ffe563,
                    0 0 0 10px #9b4dbb;            

 

3).配合transform和transition實現彈出效果

.popup { 
    transform: scale(1); 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); 
    transition: box-shadow 0.5s, transform 0.5s; 
}
.popup:hover { 
    transform: scale(1.3); 
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3); 
    transition: box-shadow 0.5s, transform 0.5s; 
}