CSS內(nèi)外都有陰影可以讓元素看起來更加立體，同時(shí)也可以給人一種柔和的感覺。

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

代碼中，box-shadow設(shè)置了一個(gè)外部陰影，其值包括陰影的位置、模糊度、擴(kuò)散半徑和顏色。而inset則代表內(nèi)部陰影。

值得注意的是，box-shadow和inset雖然可以一起使用，但是順序不能顛倒，否則會(huì)出現(xiàn)意外效果。同時(shí)也可以使用多個(gè)box-shadow來設(shè)置不同方向的陰影，達(dá)到更多層次的效果。

.box {
box-shadow: 
2px 2px 5px rgba(0, 0, 0, 0.2),
-2px -2px 5px rgba(0, 0, 0, 0.2),
2px -2px 5px rgba(0, 0, 0, 0.2),
-2px 2px 5px rgba(0, 0, 0, 0.2);
}

使用多個(gè)box-shadow，每個(gè)值表示不同的方向，如（右、下、模糊度、顏色）或（左、上、模糊度、顏色），從而實(shí)現(xiàn)立體的層次效果。

CSS內(nèi)外都有陰影不僅可以用在常規(guī)元素上，也可以用在圖片上，增強(qiáng)視覺效果，并且只需要很少的代碼即可實(shí)現(xiàn)。

.img-shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

在圖片上使用box-shadow即可讓圖片看起來有立體感，也可以加上inset來實(shí)現(xiàn)內(nèi)部陰影效果。