CSS 圆角属性的运作机制
CSS 中的 border-radius 属性用于确定元素外边框圆角的绘制方式。在默认状态下，该属性通过定义圆角的半径来将直角转化为圆弧。
本工具的四个角滑块按照顺时针方向，依次对应元素的左上（border-top-left-radius）、右上（border-top-right-radius）、右下（border-bottom-right-radius）和左下（border-bottom-left-radius）四个角。当用户在工具中调整这些数值时，浏览器会实时渲染对应的圆角效果。工具的初始滑块数值为 24，此时生成的 CSS 代码为 border-radius: 24px;。
像素与百分比单位的区别
在设置圆角时，选择合适的单位会直接影响元素的视觉表现和响应式适应能力：
- 像素单位 (px)：使用像素作为单位时，圆角的大小是固定的，不随元素自身尺寸的变化而改变。这种方式适合用于尺寸固定的按钮、卡片或输入框，能够保证在任何屏幕分辨率下圆角的绝对弧度保持一致。
- 百分比单位 (%)：使用百分比时，圆角的半径是相对于元素自身的尺寸来计算的。具体而言，水平方向的百分比基于元素的宽度计算，垂直方向的百分比则基于元素的高度计算。这意味着，如果元素的宽高不一致，百分比圆角在水平和垂直方向上的实际像素值也会不同。
椭圆角模式与双半径控制
当关闭椭圆角模式时，每个角都由单一半径控制，呈现为标准的四分之一圆弧。
一旦开启“椭圆角”模式，每个角都将获得独立的“水平”和“垂直”两个控制滑块。在这种模式下，每个角都由两个半径决定，从而形成四分之一椭圆弧。这种双半径的设定是创造柔和、流动且具有机体感的异形（“blob”）形状的基础。
在 CSS 语法中，椭圆角通过带斜杠（/）的两组数值来表示，斜杠前为水平半径，斜杠后为垂直半径。当用户通过滑块将所有角重新调整为正圆（即水平与垂直半径相等）时，生成的 CSS 代码会自动简化，收回为不带斜杠的常规简写形式。
常见形状的实现方法
利用不同的参数组合，可以快速构建出网页设计中常用的几何形状：
- 正圆：将“四角联动”开启，将单位切换为“%”，并将数值设为 50%。若原始元素为正方形，则会呈现为标准的正圆形。
- 胶囊形状：在设计胶囊形按钮时，应保持使用“px”单位，并将圆角滑块向右拖动，使其数值超过按钮高度的一半。此时，无论按钮的宽度如何拉伸，其左右两端都会保持完美的半圆弧度，而不会发生变形。
- 异形与叶形：通过使用预设按钮，可以一键应用特定的参数组合。例如，“正圆”预设会将所有角设为 50%；而“异形”和“叶形”等预设则利用了非对称的圆角配置，快速生成不规则的视觉块。
界面操作指南
在操作界面中，用户可以通过以下输入控件来调整圆角参数：
- 滑块控制：滑块的调节范围为 0-100。当开启“四角联动”时，由单个标有“所有角”的滑块统一控制；当关闭联动时，界面会提供“左上”、“右上”、“右下”和“左下”四个独立滑块。在开启“椭圆角”后，每个角还会进一步拆分为“水平”和“垂直”两个滑块。
- 控制开关：提供“单位”（可在 px 和 % 之间切换）、“四角联动”开关以及“椭圆角”开关。
- 预设按钮：提供“直角”、“圆角”、“正圆”、“异形”和“叶形”五个快速预设选项。
调整完成后，工具会在“CSS 代码”区域实时输出生成的代码，用户点击“复制 CSS”按钮即可将代码复制到剪贴板中，直接应用于网页样式表中。
隐私与本地处理说明
本工具充分保障用户的操作隐私。每个圆角形状的计算与绘制均直接在您的浏览器中完成。您在此处输入的任何数值、调整的滑块参数或生成的代码，均不会上传到 BroBroGo 服务器。
常见问题解答
四个角和 px、% 是怎么对应的？
四个滑块按顺时针分别对应左上、右上、右下、左下四个角。用 px 时圆角是固定的像素大小；用 % 时则相对于元素本身——横向百分比按宽度算，纵向百分比按高度算，所以正方形设成 50% 就变成了圆。
椭圆模式是做什么的？
关闭时每个角都是单一半径的四分之一圆。打开后，每个角可以分别设横向和纵向两个半径，这正是做出柔和、流动的异形（“blob”）形状的关键。工具会自动写成带斜杠的两组数值，四个角都变回正圆时又会收回最短写法。
怎么做出正圆或胶囊形状？
把四个角联动，切到 %，设成 50%——正方形就变成正圆。想做胶囊按钮就改用 px，把某个角拖到超过按钮高度的一半，不管多宽两端都会是完整的圆。点一下「正圆」预设就能得到第一种效果的起点。