總結(jié)css3之box-shadow

box-shadow是css3中的一個十分常用的屬性，給前端頁面美化帶來很大的福利。這讓我們更多的去使用css構(gòu)造想要的效果，而不是用背景圖片。之前有使用過，在這里總結(jié)一下。

基本用法

這里借用一下別人的圖～
x,y坐標為正，是向右和下擴散，x,y坐標為負，是向左向上擴散。模糊值為0，就是類似于邊框效果，模糊值越大，越模糊；陰影擴散長度就是代表陰影的寬度，值越大陰影越多。

syntax-1.png

syntax-2 (1).png

syntax-3.png

但我們平常所用的往往是它的基本用法。
像這樣的：

Paste_Image.png

但這些并不能滿足我們的要求，以及用戶的體驗。美工設(shè)計出來的效果往往是這樣的：

Paste_Image.png

又或是這樣的：

Paste_Image.png

其實，除過基本的使用，結(jié)合其他css3的屬性是可以制作出各式各樣的效果。

四周不同顏色的邊框效果

Paste_Image.png

這個是通過多層陰影重疊的方式實現(xiàn)的?？梢詫懚鄠€陰影用逗號隔開。但需要注意，排在前面的陰影的寬度不能大于排在后面的陰影，否則后面的陰影無法遮擋，就不能做出四周不同陰影的效果

     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; /*右邊陰影*/

比如對于前面提到的按鈕，通過四周不同顏色的內(nèi)陰影制作出層次感：這里注意，四邊的順序不一定是固定的順時針或者逆時針，根據(jù)情況自由搭配即可，只要保證后面的可以遮蓋前面的陰影即可。

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

同樣也是用逗號隔開多個陰影，不過調(diào)整了陰影的擴展長度值，其實就是每個排在后面的陰影比前一個長一點點，保持其他值不變給他們加上不同的顏色，達到多層邊框的效果。這樣我們就可以根據(jù)實際需求任意搭配了。

box-shadow: 0 0 0 3px #FFFF66, /*最內(nèi)層*/
       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, /*最內(nèi)層*/
       0 0 50px 20px #FF6600,
       0 0 50px 40px #FFFF00; /*最外層*/

結(jié)合:before,:after元素制造陰影效果

Paste_Image.png

比如這個立體的效果，可以通過給before,after元素添加陰影并結(jié)合旋轉(zhuǎn)等特性得到。

.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);
     }

之前在開發(fā)中暫時接觸到這么多，完整的box-shadow-demo地址:
https://github.com/lavender21/css-demo/blob/master/box-shadow-demo.html
這個demo用來收集不同類型的陰影效果，以后遇到好的效果會及時收錄進來。