[譯] box-shadow 屬性

原文地址： https://bitsofco.de/the-box-shadow-property

PS：非直譯。有翻譯不當的地方，請指出。

CSS3 引入的 box-shadow 屬性用來創建陰影效果。陰影效果給我們的二維平面增加了深度的感覺。

語法

box-shadow 屬性值由五部分組成：

box-shadow: offset-x offset-y blur spread color position;

一定要注意順序。

offset-x

offset-x 用來聲明陰影的水平偏移，即陰影在 X 軸上的位置。當值為正數，陰影位于元素的右側，若值為負數，陰影位于元素的左側。

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }

.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

offset-y

offset-y 用來聲明陰影的垂直偏移，即陰影在 Y 軸上的位置。當值為正數，陰影位于元素的下面，若值為負數，陰影位于元素的上面。

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }

.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

blur

blur 表示陰影的模糊半徑。效果與設計軟件中使用的高斯模糊濾鏡一樣。值為 0 意味著陰影完全不模糊。blur 值越大，邊角越不鋒利，陰影越朦朧。不允許負值，負值等同于 0。

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }

.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }

.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

spread

spread 表示陰影的大小。也可以把這個值看做陰影與元素之間的距離。當值為正數，陰影會向四周擴展。若值為負數，陰影會收縮，小于元素尺寸。默認值 0 會保持陰影和元素尺寸一致。

.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }

.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }

.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }

color

color 表示陰影的顏色。可以是任何顏色單位。參見： working with colour in css

.left { box-shadow: 0px 0px 20px 10px #67b3dd }

.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

position

position 表示陰影的位置，可選項。默認為外部陰影。可以通過使用 inset 關鍵字來制作內部陰影。

.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }

.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

多重陰影

一個元素的 box-shadow 屬性可以接受多個陰影聲明，組成一個逗號分隔的列表。

.foo { 
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}    

圓角陰影

box-shadow 屬性的 border-radius 由同一個元素的 border-radius 屬性來控制。

.foo { 
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-raduis: 50%;
}

組合起來

把上面各部分組合起來，我們可以用 box-shadow 來創建一些驚人的效果。

Non-Layout-Blocking 邊框的另一種選擇

用 box-shadow 模擬邊框，不會影響盒模型以及頁面其余部分的布局。利用多重陰影，可以使元素有不同顏色的邊框。

.simple {
    box-shadow: 0px 0px 0px 40px indianred;
}

.multiple {
    box-shadow: 20px 20px 0px 20px lightcoral,
                -20px -20px 0px 20px mediumvioletred,
                0px 0px 0px 40px rgb(200,200,200);
}

pop-up 效果

通過對 box-shadow (& transform ) 屬性進行變換，可以模擬元素靠近和遠離用戶的效果。

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

floating 效果

給 :after 偽元素添加 box-shadow 。在元素下方創建陰影，來模擬升起和下降。

.floating {
    position: relative;

    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);

    transform: translate(-50%, 0);
    transition: transform 1s;
}

/* Hover States */
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}

box-shadow 不單單是一個創建陰影的工具，使用它還可以創建很多其它復雜的效果。例如： 紙張效果 。

 

來自： https://segmentfault.com/a/1190000005340697