CSS中可以通過box-shadow屬性來為盒子添加陰影，同時也可以通過:hover偽類選擇器實現鼠標懸停時出現陰影的效果。

.box {
width: 200px;
height: 200px;
background-color: #ddd;
transition: box-shadow 0.3s ease-in-out;
}
.box:hover {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們先定義了一個類為.box的盒子，它的寬度和高度都是200px，背景顏色為#ddd。在:hover偽類選擇器中，我們為該盒子添加了一個2px的水平偏移，2px的垂直偏移和10px的模糊值，陰影顏色使用了黑色，透明度為0.5，這種陰影效果更加柔和，也更加美觀。

如果想要實現點擊盒子出現陰影的效果，可以借助JavaScript，在點擊事件中添加或者刪除一個類，用該類來實現陰影效果的切換。

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

定義好一個名為box-shadow的類，并將陰影效果的CSS樣式寫入該類中。在JavaScript中，我們可以獲取對應的盒子元素，然后為它添加或者刪除box-shadow類，即可實現點擊時出現或者消失陰影的效果。

let box = document.getElementById('box');
box.addEventListener('click', function() {
box.classList.toggle('box-shadow');
});

在上面的代碼中，我們獲取了id為box的盒子元素，并為它添加了一個點擊事件。在點擊事件中，使用了classList.toggle()方法，該方法可以在元素中添加或刪除指定的類，并切換它的狀態。即點擊一次添加box-shadow類，再次點擊則刪除該類，實現了點擊盒子出現陰影的效果。