CSS實現立體開關按鈕是一種非常流行的設計技巧，可以為網站帶來獨特的視覺效果。要實現這一效果，我們需要使用一些CSS屬性。

.round-button {
position: relative;
width: 80px;
height: 40px;
background-color: #ddd;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.round-button:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 40px;
background-color: #f5f5f5;
border-radius: 50px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.round-button:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 36px;
height: 36px;
background-color: #444;
border-radius: 50px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: translateX(0);
transition: all 0.3s ease-out;
}
.round-button.checked {
background-color: #4e9af1;
border-color: #4e9af1;
}
.round-button.checked:before {
background-color: #3671b8;
box-shadow: none;
}
.round-button.checked:after {
background-color: #fff;
transform: translateX(40px);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

上面的CSS代碼使用了偽元素:before和:after來分別表示按鈕的底部和上面的開關。我們可以根據自己的需要調整背景色、圓角等樣式。