圓角圖片產生器

這款圓角工具的不同之處：每個角都可以有自己的半徑，半徑可用像素或較短邊的百分比表示，角本身可以是普通圓角弧、超橢圓平滑曲線、直線切角或向內的內凹。工具還會產生對應的 CSS border-radius 規則，因此同一形狀既可匯出為檔案，也可在程式碼中重現。

為什麼要把圖片的角做成圓角？

如何為圖片加上圓角

1. 載入圖片。將檔案拖到放置區，或選擇選擇圖片。JPG、PNG、WebP、GIF、BMP、AVIF 和 SVG 都可以，只要瀏覽器能解碼它們。
2. 設定半徑。拖動預覽上圓形的圓角控制點，移動圓角半徑滑桿，或輸入精確數值並在 px 與 % 之間切換單位。
3. 選擇圓角樣式。圓角、超橢圓、切角或內凹。關閉連動所有角後，可為每個角設定自己的數值，畫面上的排列方式與它們控制的角一一對應。
4. 如需內距、背景或邊框，再加入。內距會在圖片周圍擴大畫布，背景填滿畫布，邊框環沿著圓角輪廓走，而不是沿著原來的矩形。
5. 下載。透明圓角請保持 PNG，然後點選下載圖片。面板會顯示匯出尺寸和檔案大小，CSS 框會顯示等效的樣式表規則。

像素半徑還是百分比半徑

像素半徑是絕對值：無論圖片寬 400 還是 4000 像素，32 px 都是 32 px，所以同一個數值在小縮圖上很誇張，在大照片上幾乎看不出來。百分比半徑依圖片的較短邊計算，因此會隨圖片縮放，在每次匯出上看起來都一樣。50% 是實用上限，正方形會得到圓形，矩形會得到膠囊形。

四種圓角樣式

• 圓角 — 四分之一圓，與瀏覽器繪製 border-radius 的幾何相同。結果可預期，也是唯一能與 CSS 一一對應的樣式。
• 超橢圓 — 超橢圓式圓角。曲線從各邊更遠處開始，流入直邊時沒有正圓那種曲率突變，這也是 iOS 和 Android 應用程式圖示規範使用該形狀的原因。
• 切角 — 用一條斜直線切掉角落。比曲線更銳利、更偏技術感，小尺寸時仍然清晰。
• 內凹 — 弧線向內彎曲，挖出凹口。相對兩側各做一個內凹角，會立刻被看成票券或標籤。

選擇輸出格式

因為 JPG 沒有 alpha 通道，匯出時會用所選背景色填滿切掉的圓角，而不是留空。這往往正是你想要的效果 — 白底頁面上的白色圓角照片 — 但這不是透明，事後也無法還原。

主要功能

• 天生注重隱私：檔案透過瀏覽器 FileReader API 讀取，並在本機畫布上繪製。絕不會上傳。
• 拖動圓角編輯：在預覽上沿對角線拉動控制點，半徑會跟隨手指或游標變化。
• 分角控制：可以只圓化上面兩個角，或只內凹一側，其餘保持直角。
• 預覽背景：在透明棋盤格、白色、深色和彩色漸層之間切換，下載前檢查 alpha 邊緣。
• 內距、背景填色和邊框環都沿同一圓角輪廓走。
• 輸出縮放：依原始解析度匯出，或在同一次處理中縮小到 75%、50% 或 25%。
• 可複製的 CSS：產生的 border-radius 規則可在不適合用檔案時，在樣式表中重現同一形狀。
• 抗鋸齒邊緣：圓角作為裁剪路徑繪製，曲線保持平滑，而不是出現階梯狀鋸齒。

用圖片檔還是 CSS？

如果圓角圖要放進簡報、PDF、電子郵件簽名、商品列表，或任何不會執行你樣式表的工具，你需要帶真實透明度的真實檔案 — 請匯出 PNG。如果它要放到你能控制的網頁上，CSS 規則更輕、任意尺寸都保持銳利，以後也更容易改；這時複製片段即可。兩者並不互斥：許多團隊對外使用 PNG，網站上使用 CSS。

疑難排解

• 圓角看起來有鋸齒：來源圖可能已經很小。請在可用的最大解析度上加圓角，然後再縮小，而不是先放大再加圓角。
• 深色背景上出現一圈淺色光暈：圖片裡已經內嵌白色遮罩。用相符的顏色加一兩像素內距，或稍微增大半徑，把光暈切掉。
• 下載後開啟是白色方塊：格式是 JPG，或背景未設為透明。請將輸出格式改為 PNG。
• 很大的照片感覺卡頓：每次移動滑桿時，畫布都會重繪完整解析度圖片。放開滑桿讓瀏覽器稍等片刻，或降低輸出縮放。
• 動態 GIF 失去動畫：畫布只匯出一幀。只有第一幀會被加圓角並儲存。

常見問題

我的圖片會上傳到伺服器嗎？

不會。檔案由瀏覽器透過 FileReader API 讀取，並在您自己的裝置上繪製到 HTML canvas。不會傳送到 miniwebtool，因此私密截圖、客戶稿件和個人照片都不會離開您的電腦。頁面本身仍需要連網才能載入。

為什麼我的圓角看起來是白色或黑色，而不是透明的？

只有 PNG 和 WebP 能儲存透明度。如果匯出 JPG，該格式沒有 alpha 通道，切掉的圓角會改用背景色填滿。請在輸出格式清單中選擇 PNG，並將背景設為透明。如果圓角看起來仍不對，請檢查您貼上的應用程式或網站是否支援 alpha，因為有些編輯器會把 PNG 透明度壓到白色底上。

如何做出完全圓形的圖片？

將半徑單位切換為百分比，並把半徑設為 50%。正方形圖片會得到正圓。矩形圖片會得到膠囊形或跑道形，因為百分比半徑是依較短邊計算的。使用「圓形」預設可一鍵裁成正方形並加圓角。

圓角、超橢圓、切角和內凹有什麼區別？

圓角是普通的四分之一圓，與 CSS border-radius 畫出的形狀相同。超橢圓把曲線沿各邊延伸得更遠，銜接平滑連續，這是 iOS 和 Android 應用程式圖示使用的外觀。切角用一條斜直線切掉角落。內凹向內彎曲而不是向外，在每個角挖出凹口，適合票券、優惠券和徽章。

像素半徑是否與網站上的 CSS border-radius 一致？

半徑依圖片自身的像素套用，因此只有在圖片依原始尺寸顯示時才與 CSS 一致。一張 1200 像素寬的匯出圖放在 600 像素寬的欄中會被縮小一半，所以 48 像素半徑在螢幕上看起來像 24 像素。使用百分比單位可得到與尺寸無關的結果，或複製本工具產生的 CSS 片段，其中已給出縮放後的等效值。

能否保持畫質和原始解析度？

可以。除非您變更輸出縮放或加入內距，匯出都會保持原始像素尺寸；PNG 是無損的，因此不會被再次壓縮。只有圓角像素會從完全不透明變為透明。WebP 和 JPG 是有損的，在更看重檔案大小而不是精確複製來源像素時再使用它們。