圓形輻射是一種非常常見的 CSS 技巧。它可以用來創建出漂亮的按鈕效果、圖片卡片等。下面我們一起來了解一下實現圓形輻射的技巧。

button {
background: radial-gradient(circle, rgba(255,255,255,0) 50%, #000 51%);
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
padding: 1rem 2rem;
transition: 0.3s;
}
button:hover {
transform: translateY(-2px);
}

以上是一個簡單的按鈕樣式的代碼示例。其中，使用了 radial-gradient() 方法來創建圓形輻射，使用了 circle 參數指定輻射的形狀為圓形。接下來的參數則指定了輻射的顏色漸變，從透明到黑色。在這個例子中，輻射的半徑是 50%，也就是指定半徑的值為規定容器的一半。

此外，我們還使用了 CSS 的過渡效果，為按鈕添加了從下到上的移動動畫。這里設置了鼠標懸浮時的動畫效果，使按鈕在用戶交互時顯得更為有趣。

總的來說，使用圓形輻射可以為頁面中的元素帶來更為豐富的視覺效果。借助 CSS 的眾多特性，我們可以創造出各種不同的輻射形狀、填充顏色等多樣化的效果。大家可以根據自己的需求和創意，自由發揮并實踐出自己滿意的效果。