CSS可以用來制作各種各樣的效果，今天我們就來學習一下如何用CSS制作一個漂亮的碟片。

.disc {
width: 200px;
height: 200px;
background-color: #eee;
border-radius: 50%;
position: relative;
}
.disc::before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: white;
border-radius: 50%;
}
.disc::after {
content: "";
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background-color: #eee;
border-radius: 50%;
}
.disc::before, .disc::after {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 10px 10px rgba(0, 0, 0, 0.3);
}

以上代碼是制作一個碟片的CSS樣式，首先給盤子設置一個寬高，然后使用border-radius屬性將它變成一個圓形。然后使用::before和::after偽類來制作內外兩層光暈效果，并給它們添加陰影。

接下來我們可以在碟片中間放一張圖片或者是一些其他的元素，代碼如下：

.disc img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}

以上代碼是給插入的圖片設置樣式，將它設置為圓形，然后使用transform屬性將它水平垂直居中。

最后你會得到一個漂亮的碟片效果。