CSS中有一個(gè)很有趣的屬性——box-shadow。這個(gè)屬性可以為一個(gè)元素添加陰影效果，從而增加元素的立體感和層次感。除了可以添加普通的陰影外，box-shadow還可以添加兩側(cè)陰影，讓元素看起來(lái)像是浮動(dòng)在頁(yè)面上。

.box{
box-shadow: -10px 0px 10px -10px #ccc, 
10px 0px 10px -10px #ccc;
}

上面的代碼中，第一個(gè)box-shadow為左側(cè)陰影，第二個(gè)為右側(cè)陰影。它們的基本語(yǔ)法相同，只是水平偏移量、垂直偏移量和模糊距離取相反的值。

如果想要兩側(cè)陰影更加明顯，可以增加模糊距離。模糊距離越大，陰影色塊越大，陰影的強(qiáng)度感也更強(qiáng)。

.box{
box-shadow: -20px 0px 20px -20px #ccc, 
20px 0px 20px -20px #ccc;
}

除了在普通元素中使用，兩側(cè)陰影還可以用在卡片式結(jié)構(gòu)、導(dǎo)航條等場(chǎng)景中，增加元素的立體感和美觀性。不過(guò)，過(guò)度使用陰影效果會(huì)在視覺(jué)上造成混亂，需要根據(jù)實(shí)際情況做出判斷。

總之，兩側(cè)陰影是CSS中一個(gè)有趣的屬性，可以增加元素的立體感，讓頁(yè)面更加美觀。希望大家可以在實(shí)際開(kāi)發(fā)中靈活使用，寫(xiě)出更好的頁(yè)面效果。