在 CSS 中建立圓形按鈕

Sushant Poudel 2023年2月20日
在 CSS 中建立圓形按鈕

本文將介紹一種在 CSS 中建立圓形按鈕的方法。

在 CSS 中使用 border-radius 屬性建立圓形按鈕

我們可以使用 border-radius 屬性在 CSS 中建立一個圓形按鈕。該屬性通過將半徑新增到元素的角來為選定元素建立圓角。

border-radius 屬性採用一到四個值作為選項。我們將研究下面的例子。

border-radius 有四個值,初始值適用於左上角,第二個適用於右上角,第三個值適用於右下角,最終值適用於底部-左角。

border-radius: 12px 50px 20px 5px

對於三個值,初始值應用於左上角,第二個值應用於右上角和左下角,最終值應用於右下角。

border-radius: 12px 50px 20px

初始值適用於兩個值中的左上角和右下角,後者適用於右上角和左下角。

border-radius: 12px 50px

當設定單個半徑時,它會形成一個圓角,因為它適用於元素的所有角。

border-radius: 12px

我們可以使用 border-radius 屬性來建立一個完美的圓形按鈕,方法是將 border-radius 提供為按鈕高度和寬度的一半。我們可以使用一個值 border-radius 來進行演示。

例如,使用 HTML 中的 button 標籤建立一個按鈕。在按鈕內寫下文字點選這裡

現在在 CSS 中,選擇按鈕並將按鈕的 heightwidth 指定為 200px。然後,將 border-radius 指定為 50%100px

我們輸入的 100px``border-radius 是按鈕高度和寬度的一半。結果,按鈕的每個角將形成一個圓角,其邊長半徑的一半。

我們可以使用 border-radius50%值來簡化它。因此,我們使用 CSS 的 border-radius 屬性構建了一個圓形按鈕。

示例程式碼:

<button> Click here </button>
button {
 height: 200px;
 width: 200px;
 border-radius: 100px;
}
button {
 height: 200px;
 width: 200px;
 border-radius: 50%;
}
作者: Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn