border-radius 是大多數人最早學習的 CSS 屬性之一,也是他們最後完全理解的屬性之一。將卡片的所有四個角落四捨五入 12 像素很容易。然後按鈕需要是任意寬度的藥丸,頭像需要是一個圓圈,聊天泡泡需要一個尖角,突然之間是速記順序,兩者之間的差異 50% 和 999px,以及半徑為 "停止生長"一切都很重要。
本指南解釋了從規範開始該屬性的工作原理:每個值計數的含義、百分比與像素的差異、瀏覽器如何縮放過大的半徑、如何建立常見的形狀以及為什麼圓角有時不會出現。這些範例是根據 CSS邊框半徑產生器,即時預覽每個角落並輸出最短的有效速記。它是其中之一 CSS 工具 在工具上。
TL;DR:
border-radius舍入一個元素's 角。一個值設定所有四個角,兩個值設定左上角/右下角和右上角/左下角對,三個值設定左上角,然後右上角和左下角一起,然後右下角,四個值從左上角順時針方向運行。像素半徑是固定曲線;百分比是分別根據寬度和高度測量的,因此50%僅在正方形上做一個圓。當沿邊的半徑加起來大於邊時,瀏覽器會按比例縮小每個半徑。這 邊界半徑產生器 為您處理速記,客戶端,免費,無需註冊。
CSS 邊界半徑屬性有什麼作用?
的 border-radius 屬性圍繞元素的外角'的邊框框。每個角變成具有水平半徑和垂直半徑的橢圓的四分之一。當兩個半徑相等時,角是四分之一圓。
它在 W3C 中定義 CSS 背景和邊界模組等級 3十多年來,每個主要瀏覽器都支援無前綴,因此不需要供應商前綴。
舍入的影響比邊界線更大。元素'背景被剪裁成圓形, box-shadow 遵循曲線,在現代瀏覽器中也是如此 outline。 除非您添加,否則元素內的內容不會被剪掉 overflow: hidden,這是圓角似乎失效的最常見原因。
邊界半徑速記如何運作?
border-radius 是四個手寫屬性的簡寫: border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius. 您給出的值的數量決定每個值適用於哪些角落。
| 價值觀 | 例子 | 左上 | 右上 | 右下角 | 左下角 |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
此模式與所使用的順時針順序相同 margin 和 padding,從左上角而不是頂側開始。缺失的值從它們的對角線夥伴填充:用兩個值,右下副本左上和左下副本右上。有三個,左下副本右上。
生成器反轉此過程。您用自己的滑桿設定每個角落,它寫入產生相同形狀的最少值:
- 所有四個角相等都會給出一個值。
- 左上角等於右下角,右上角等於左下角,給出兩個值。
- 右上角等於左下角(但另一條對角線不同)給出三個值。
- 其他任何東西都可以得到四個。
一個後果讓人們感到驚訝。僅將左上角四捨五入 20px,輸出為 border-radius: 20px 0px 0px;,不是四值 20px 0px 0px 0px. 兩者都是正確的;三值形式較短,因為右上角和左下角均為零。每個值都保留其單位,因此零角印為 0px.
邊界半徑的 px 和 % 有什麼差別？
像素半徑是絕對大小。半徑百分比是相對於元素的' s 尺寸,水平部分和垂直部分分別測量:水平半徑與寬度,垂直半徑與高度。
在正方形上,這些是相同的數字。在矩形上,它們不是,這就是為什麼 50% 將正方形變成圓形,將長方形變成橢圓形。
以產生器為例#39;預覽盒,寬 224 像素,高 160 像素:
| 價值 | 水平半徑 | 垂直半徑 | 形狀 |
|---|---|---|---|
16px |
16px | 16px | 圓角長方形,圓角 |
50% |
112px(224 的 50%) | 80%(160 的 50%) | 橢圓 |
25% |
56px | 40px | 圓角長方形,橢圓形角 |
999px |
999%,縮減至 80% | 999%,縮減至 80% | 圓端的藥丸 |
其他兩個單元一旦解析,就會表現得像像素。 em 與元素'相關;自己的字體大小和 rem 到根字體大小,所以 1rem 預設瀏覽器設定為 16px。使用 em 或者 rem 讓角落隨著文字大小縮放,這適合隨標籤一起生長的按鈕和標籤。
在產生器中,滑桿以整數步長從 0 到 200(px)、0 到 50(%)、0 到 10(em 和 rem)運行。切換單位會保留數字並交換單位,因此 16px 變成 16%,而不是轉換後的值。
為什麼大邊界半徑不再變圓?
因為規範不允許角曲線重疊。當一側的半徑加起來超過該側's 長度時,瀏覽器會將元素上的每個半徑縮小相同的係數,直到它們適合為止。
的 角重疊規則 像這樣工作。對於四個邊中的每一個,將邊除以#39; s 長度除以與其接觸的兩個半徑的總和。取這些比率中最小的,稱為 f。如果 f 小於 1,則將每個半徑乘以 f。
這是計算 border-radius: 999px 在 224 x 160 預覽盒上:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
每個角落的半徑為 80px,恰好是 160px 高度的一半,因此短端變成完美的半圓。同樣的事情發生在 200px 時,像素滑桿的頂部:f 為 160 /400 = 0.4,200 × 0.4 又為 80px。超過較短邊的一半,像素半徑停止改變任何內容。
接下來是兩個實際結果。藥丸按鈕可以使用任何非常大的像素值,並且它可以在任何寬度上保持藥丸。由於所有四個角落的縮放比例成比例,因此單一超大角也會縮小其他角。將左上角設定為 999px,其餘角設定為 20px,20px 角會隨之縮小。
如何製作具有邊框半徑的常見形狀?
介面中的大多數圓形形狀都來自少數配方。生成器有常見生成器的預設。
| 形狀 | CSS | 筆記 |
|---|---|---|
| 尖銳 | border-radius: 0px; |
大多數元素的預設值 |
| 微妙 | border-radius: 6px; |
輸入,小按鈕 |
| 卡片 | border-radius: 12px; |
面板和卡片 |
| 圓圓的 | border-radius: 16px; |
生成器's 起始值 |
| 丸 | border-radius: 999px; |
透過重疊縮放適用於任何寬度 |
| 圓圈 | border-radius: 50%; |
需要相等的寬度和高度 |
| 葉 | border-radius: 0px 24px; |
兩個相對的角落呈圓形 |
| 斑點 | border-radius: 60% 40%; |
百分比不等的有機形狀 |
| 語音泡沫 | border-radius: 16px 16px 16px 0px; |
揚聲器附近有一個尖角 |
| 選項卡 | border-radius: 8px 8px 0px 0px; |
頂部圓形,底部平坦 |
圓圈。 設定 50% 在寬度和高度相等的元素上。對於頭像,添加 aspect-ratio: 1 和 object-fit: cover 在影像上,非方形照片不會拉伸成橢圓形。
丸。 使用大像素值而不是 50%. 在一個寬按鈕上, 50% 產生具有尖頭末端的橢圓形,因為水平半徑是寬度的一半。 999px 縮放至高度的一半,得到圓形末端。
斑點。 預設 60% 40% 將左上角和右下角設定為 60%,將另外兩個設定為 40%。在預覽盒上,沿著頂部邊緣的水平半徑為 134.4px 和 89.6px,加起來正好為 224px,因此不會發生縮放,並且兩條曲線相交,它們之間沒有留下直邊。預設可以超過滑桿範圍:Blob 使用 60%,Pill 使用 999px,輸出保留這些值,直到您移動滑桿。
語音氣泡和選項卡。 兩種形狀都沒有匹配的對角線對,因此兩者都需要所有四個值。在生成器中單獨設定角,它確認不存在較短的形式。
邊框半徑中的斜線語法是什麼?
斜線將水平半徑與垂直半徑分開,因此每個角落都可以是非圓形橢圓形,尺寸您可以直接選擇。
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
斜線每一側的值都遵循與普通速記相同的一到四規則。 Toolz 產生器不寫入斜線語法:它為每個角設定一個半徑,涵蓋圓圈、藥丸、卡片和斑點。對於雞蛋形狀和自訂鏡頭形狀,從生成器開始's輸出並手動添加斜線部分。
為什麼我的圓角沒有露出來?
當 border-radius 似乎什麼都不做,原因幾乎總是其中之一。
| 症狀 | 原因 | 修復 |
|---|---|---|
| 圖像或孩子從角落戳出來 | 預設情況下,兒童不會被剪掉 | 添加 overflow: hidden 圓形父母,或也圓形孩子 |
| 根本沒有明顯的變化 | 元素沒有背景、邊框或陰影 | 給它背景顏色或邊框,以便形狀可見 |
| 桌角保持方形 | border-collapse: collapse 在桌子上 |
使用 border-collapse: separate 與 border-spacing: 0或繞過包裝紙 |
| 圓圈看起來像橢圓形 | 寬度和高度不同 | 設定相等的尺寸或 aspect-ratio: 1 |
| 藥丸有尖頭 | 使用 50% 在寬元素上 |
使用較大的 px 值,例如 999px |
| 半徑停止增加 | 重疊縮放 | 預期的;半徑上限為較短邊的一半 |
| 內部元素角看起來更厚 | 內半徑等於填充內外半徑 | 將內半徑設為外半徑減去填充 |
最後一個很微妙。一張卡片 border-radius: 16px 和 padding: 8px 包含具有相同 16px 半徑的影像看起來不均勻,因為內部曲線應該更緊。遵循外曲線的內半徑為 16 減 8,因此為 8px。
邊界半徑如何與陰影和梯度結合?
圓角很少單獨出貨。卡片通常有陰影,通常有漸變背景,兩者都會自動遵循圓形形狀。
box-shadow 追蹤圓形邊框框,因此 12px 卡下方的軟陰影具有 12px 圓形角落,無需任何額外工作。這 箱形陰影產生器 預覽圓形元素上的陰影,以及 盒子陰影指南 解釋它們背後的偏移、模糊和擴展值。
背景(包括漸變)也被剪裁成圓形。要設計填充,請使用 CSS 梯度產生器;這 CSS 梯度指南 瀏覽語法。如果角落大小應該與視口成比例而不是保持固定,則 CSS 箝位產生器 建構a clamp() 您可以使用值作為半徑,例如手機上的卡為 8px,寬螢幕上的卡為 20px。
使用產生器,一步一步
- 選擇預設 例如卡片、藥丸、圓圈或斑點,或從預設的 16px 角開始。
- 調整角落。 轉角切換預設為獨立,其中每個滑桿僅移動自己的轉角。將其切換到連結以將所有四個移動在一起。
- 選擇一個單位: px、%、em 或 rem。
- 檢查預覽。 梯度框在拖曳時更新,包括大值的重疊縮放。
- 複製 CSS。 複製 CSS 按鈕複製完整內容
border-radius:最短形式的聲明。
一切都運行客戶端:預覽和程式碼由瀏覽器中的 JavaScript 生成,不會上傳任何內容,並且頁面在載入後仍保持離線工作。當你準備好時, 打開邊界半徑產生器,設定角落,然後將聲明直接貼到樣式表中。
