CSS邊框半徑產生器

CSS 邊框半徑產生器是 CSS 邊框半徑屬性的視覺化編輯器。您為每個角落拖曳一個滑桿,即時觀看預覽元素,然後複製它產生的確切 CSS - 無需猜測像素值並重新載入頁面。

Border-Radius 屬性看起來很簡單，但有一個緊湊的速記，可以絆倒人們：一個值圍繞所有四個角落，兩個值設定兩個對角線，四個值從左上角順時針運行。 此工具可讓您獨立設定每個角落，然後自動輸出最短的等效速記，讓您的 CSS 保持乾淨。

一切都在您的瀏覽器中運行。 從卡片、藥丸、圓形或 blob 等預設開始，微調每個角落，在像素和百分比之間切換單位，然後複製聲明。 沒有帳戶，沒有上傳，一旦頁面載入，它就會繼續離線工作。

百分比和像素在任何非正方形的東西上表現都不同,這種差異讓人感到驚訝。像素半徑在每個角落都是相同的曲線,而百分比是針對每個軸單獨測量的,因此寬框上的 50% 會給出一個橢圓而不是一個圓。這是將矩形變成藥丸或鏡片形狀的屬性。該規範還可以保護您免受不可能的幾何形狀的影響:當沿著一條邊的半徑加起來超過該邊的長度時,瀏覽器會按比例縮放元素上的每個半徑而不是與它們重疊,因此一個大值會悄悄停止增長。輸出使用最短的有效簡寫,這就是為什麼四個相等的角折疊成一個數字。

作為邊界半徑 CSS 產生器,有用的部分是它為您進行速記算術。將左上角和右下角設為 24,將右上角和左下角設為 8,單位為 px,輸出讀取邊界半徑:24px 8px;因為對角線對匹配。右下角降至 0,它變成三值 24px 8px 0px,因為右上角和左下角仍然匹配。您可以在複製前根據預覽檢查每個結果,這就是 CSS 邊界半徑產生器的用途。