總結css3之box-shadow
box-shadow是css3中的一個十分常用的屬性，給前端頁面美化帶來很大的福利。這讓我們更多的去使用css構造想要的效果，而不是用背景圖片。之前有使用過，在這里總結一下。
基本用法
這里借用一下別人的圖～
x,y坐標為正，是向右和下擴散，x,y坐標為負，是向左向上擴散。模糊值為0，就是類似于邊框效果，模糊值越大，越模糊；陰影擴散長度就是代表陰影的寬度，值越大陰影越多。
syntax-1.png
syntax-2 (1).png
syntax-3.png
但我們平常所用的往往是它的基本用法。
像這樣的：
Paste_Image.png
但這些并不能滿足我們的要求，以及用戶的體驗。美工設計出來的效果往往是這樣的：
Paste_Image.png
又或是這樣的：
Paste_Image.png
其實，除過基本的使用，結合其他css3的屬性是可以制作出各式各樣的效果。
四周不同顏色的邊框效果
Paste_Image.png
這個是通過多層陰影重疊的方式實現的。可以寫多個陰影用逗號隔開。但需要注意，排在前面的陰影的寬度不能大于排在后面的陰影，否則后面的陰影無法遮擋，就不能做出四周不同陰影的效果
box-shadow: -5px 0 5px 0 #f00, /*左邊陰影*/
0 -5px 5px 0 #0f0, /*頂部陰影*/
0 5px 5px 0 #ff0, /*底部陰影*/
5px 0 5px 0 #f0f; /*右邊陰影*/
box-shadow: 5px 0 5px 0 #f00 inset, /*左邊陰影*/
0 5px 5px 0 #0f0 inset, /*頂部陰影*/
0 -5px 5px 0 #ff0 inset, /*底部陰影*/
-5px 0 5px 0 #f0f inset; /*右邊陰影*/
比如對于前面提到的按鈕，通過四周不同顏色的內陰影制作出層次感：這里注意，四邊的順序不一定是固定的順時針或者逆時針，根據情況自由搭配即可，只要保證后面的可以遮蓋前面的陰影即可。
Paste_Image.png
.btn1{
margin-top: 50px;
background: rgb(42, 171, 160);
border: none;
color: #fff;
width: 240px;
height: 50px;
box-shadow: -4px 0 2px rgb(145, 224, 217) inset, /*右邊陰影*/
4px 0 2px rgb(33, 135, 126) inset, /*左邊陰影*/
0 -4px 2px rgb(145, 224, 217) inset, /*底邊陰影*/
0 4px 2px rgb(33, 135, 126) inset;
}
多層陰影制作漸變邊框效果
Paste_Image.png
同樣也是用逗號隔開多個陰影，不過調整了陰影的擴展長度值，其實就是每個排在后面的陰影比前一個長一點點，保持其他值不變給他們加上不同的顏色，達到多層邊框的效果。這樣我們就可以根據實際需求任意搭配了。
box-shadow: 0 0 0 3px #FFFF66, /*最內層*/
0 0 0 6px #FFCC66,
0 0 0 9px #FF9966,
0 0 0 12px #FF6666,
0 0 0 15px #FF3366; /*最外層*/
box-shadow: 0 0 50px 10px #FF0000, /*最內層*/
0 0 50px 20px #FF6600,
0 0 50px 40px #FFFF00; /*最外層*/
結合:before,:after元素制造陰影效果
Paste_Image.png
比如這個立體的效果，可以通過給before,after元素添加陰影并結合旋轉等特性得到。
.box2 {
width: 300px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin: 10px;
}
.shadow {
position: relative;
max-width: 270px;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before, .shadow::after{
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
.shadow::after{
right:10px;
left:auto;
transform:rotate(3deg);
}
之前在開發中暫時接觸到這么多，完整的box-shadow-demo地址:
https://github.com/lavender21/css-demo/blob/master/box-shadow-demo.html
這個demo用來收集不同類型的陰影效果，以后遇到好的效果會及時收錄進來。
