CSS边界半径生成器

CSS边界半径生成器是CSS边界-半径属性的可视化编辑器,您为每个角拖动一个滑块,实时观看预览元素回合,并复制它产生的精确CSS - 无猜测像素值并重新加载页面。

边框半径属性看起来很简单，但有一个紧凑的速记，使人们向上行驶：一个值四舍五入，两个值设置两个对角线，四个值从左上角顺时针方向运行。 这个工具让你可以独立设置每个角落，然后自动输出最短的等效速记，这样你的CSS就保持干净。

一切都在您的浏览器中运行。 从卡片、药丸、圆圈或 Blob 等预设开始，微调每个角落，在像素和百分比之间切换单位，然后复制声明。 没有帐户，没有上传，一旦页面加载，它就会继续脱机工作。

Percentages和pixels在任何不正方形的东西上表现不同,这种差异会让人感到惊讶像素半径在每个角上都是相同的曲线,而一个百分比是针对每个轴单独测量的,所以在宽框上50%给出一个椭圆而不是圆,那就是将一个矩形变成药丸或镜片形状的属性,该规范还保护你免受不可能的几何形状:当沿着一条边的半径加起来超过那条边的长度时,浏览器会按比例缩放元素上的每个半径而不是重叠它们,因此一个大的值会悄悄停止增长输出使用最短的有效速记,这就是为什么四个相等的角塌缩为单个数字的原因。