在 css 中,radius 屬性用于設置元素角落的圓角半徑,以創建更美觀的現代化外觀。屬性值包含絕對長度或百分比,或繼承父元素的半徑。指定一個值會影響所有四個角,指定兩個值會分別影響左上角和右下角、右上角和左下角的半徑。radius 屬性被所有現代瀏覽器廣泛支持。
什么是 radius 在 CSS 中的含義?
Radius 是 CSS 中的一個屬性,它允許開發者對元素的角落進行圓角處理。它為元素創建圓角邊框,使元素看起來更加美觀和現代。
如何使用 radius?
radius 屬性接受一個或兩個值:
單個值:如果只提供一個值,它將應用于元素的所有四個角。
兩個值:第一個值應用于左上角和右下角,而第二個值應用于右上角和左下角。
語法:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">element { border-radius: ; }</code>
登錄后復制
可以是以下值之一:
絕對長度值(例如 “10px” 或 “1em”)
百分比值(例如 “20%”)
關鍵字 “inherit”(繼承父元素的圓角值)
示例:
要將所有四個角半徑設置為 10 像素,請使用以下代碼:
<code class="css">.element { border-radius: 10px; }</code>
登錄后復制
要將左上角和右下角的半徑設置為 20 像素,而右上角和左下角的半徑設置為 10 像素,請使用以下代碼:
<code class="css">.element { border-radius: 20px 10px; }</code>
登錄后復制
支持的瀏覽器:
radius 屬性在所有現代瀏覽器中都得到廣泛支持,包括 Chrome、Firefox、Safari、Edge 和 Opera。