不規則圓形生成器

獨立調整 8 個 border-radius 參數,視覺化設計有機不規則形狀,即時預覽並複製 CSS 程式碼。

調整參數
左上 (Top-Left)
X
%
Y
%
右上 (Top-Right)
X
%
Y
%
右下 (Bottom-Right)
X
%
Y
%
左下 (Bottom-Left)
X
%
Y
%
尺寸
px
px
#6C63FF
即時預覽與代碼
CSS 程式碼

常見問題

什麼是 `border-radius` 的 8 個參數?

CSS `border-radius` 支援每個角分別設定水平與垂直半徑,格式為 `border-radius: a b c d / e f g h`,共 8 個值,可產生各種有機不規則形狀。

生成的形狀可以加上顏色或圖片嗎?

可以。複製 CSS 後加上 `background: 你的顏色` 或 `background-image: url(...)` 搭配 `background-size: cover` 即可填入顏色或圖片。

這種形狀對 SEO 或無障礙有影響嗎?

純 CSS 裝飾性形狀不影響 SEO 或無障礙。若用於圖片容器,記得為內部 `<img>` 加上 `alt` 屬性。