css 中的 border-radius 屬性用于設置元素邊緣的圓角半徑，創建圓角效果打造更圓潤且現代化的外觀。它可以接受單個值（為所有四個角設置相同半徑）或四個值（分別為每個角設置不同的半徑）。該屬性兼容所有主流瀏覽器，為用戶界面設計提供了更多可定制性和視覺吸引力。

什么是 CSS 中的 border-radius

border-radius 屬性用于設置元素邊緣的圓角半徑。它允許您為元素創建圓角，從而獲得更圓潤、更現代化的外觀。

如何使用 border-radius 屬性

border-radius 可以接受以下值：

單個值：為元素所有四個角設置相同的圓角半徑。

四個值：分別為左上、右上、右下和左下角設置不同的圓角半徑。值列表使用空格分隔。

值表示為長度單位，例如像素 (px)、百分比 (%) 或 em。

示例：

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;/* 設置所有四個角的圓角半徑為 10px */
div {
  border-radius: 10px;
}

/* 設置左上和右下角的圓角半徑為 20px，右上和左下角的圓角半徑為 10px */
div {
  border-radius: 20px 10px 20px 10px;
}</code>

優點：

使用 border-radius 屬性可以：

創建更圓滑、更現代化的元素外觀。
添加視覺興趣和深度。
提高用戶界面可用性和可讀性。

兼容性：

border-radius 屬性得到所有主流瀏覽器的廣泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。