中心輻射是一種常見的 CSS 樣式，它可以用來呈現頁面上一個元素從中心向外擴散的效果。我們可以使用如下代碼來創建這種效果：

.centered {
position: relative;
display: inline-block;
}
.centered:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-sizing: border-box;
border: 2px solid #fff;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease-out;
}
.centered:hover:before {
opacity: 1;
transform: scale(1);
}

首先，我們需要為元素添加一個相對定位，并設置其為inline-block，這樣才能讓它在頁面上形成一個圓形區域。

接著，我們在元素前面添加一個:before偽元素。這個偽元素的作用是創建一個覆蓋在元素上方的圓形區域，用來展示輻射效果。

我們在這個偽元素中設置了一些屬性，包括：

• content: "";：這是偽元素必須的屬性，值為空白即可。
• position: absolute;：讓偽元素可以覆蓋在元素上方。
• top: 0;和left: 0;：讓偽元素從左上角開始。
• width: 100%;和height: 100%;：讓偽元素和元素的大小相等。
• border-radius: 50%;：將偽元素的邊角設置成圓形。
• box-sizing: border-box;：讓邊框的寬度也計入元素大小范疇內，避免邊框撐大元素。
• border: 2px solid #fff;：給偽元素加上白色的邊框。
• opacity: 0;和transform: scale(0.5);：讓偽元素開始時處于隱藏狀態，大小為元素的一半。
• transition: all 0.3s ease-out;：設置過渡效果，使得偽元素的大小和透明度變化更加平滑。

最后，我們利用:hover選擇器來給偽元素添加透明度和放大的效果。當鼠標懸浮在元素上方時，偽元素從開始時的大小和透明度逐漸過渡到原大小和完全不透明。這樣就實現了中心輻射的效果。