什么是CSS边界半径生成器？
CSS边界半径生成器是CSS边界-半径属性的可视化编辑器,您为每个角拖动一个滑块,实时观看预览元素回合,并复制它产生的精确CSS - 无猜测像素值并重新加载页面。
边框半径属性看起来很简单，但有一个紧凑的速记，使人们向上行驶：一个值四舍五入，两个值设置两个对角线，四个值从左上角顺时针方向运行。 这个工具让你可以独立设置每个角落，然后自动输出最短的等效速记，这样你的CSS就保持干净。
一切都在您的浏览器中运行。 从卡片、药丸、圆圈或 Blob 等预设开始，微调每个角落，在像素和百分比之间切换单位，然后复制声明。 没有帐户，没有上传，一旦页面加载，它就会继续脱机工作。
Percentages和pixels在任何不正方形的东西上表现不同,这种差异会让人感到惊讶像素半径在每个角上都是相同的曲线,而一个百分比是针对每个轴单独测量的,所以在宽框上50%给出一个椭圆而不是圆,那就是将一个矩形变成药丸或镜片形状的属性,该规范还保护你免受不可能的几何形状:当沿着一条边的半径加起来超过那条边的长度时,浏览器会按比例缩放元素上的每个半径而不是重叠它们,因此一个大的值会悄悄停止增长输出使用最短的有效速记,这就是为什么四个相等的角塌缩为单个数字的原因。
作为边框半径 CSS 生成器,有用的部分是它为您做速记算术。将左上和右下设置为 24,右上和左下设置为 8,在 px 中,输出读取边框半径:24px 8px;因为对角线对匹配。将右下降至 0,它就变成了三值 24px 8px 0px,因为右上和左下仍然匹配。复制前您可以根据预览检查每个结果,这就是 CSS 边框半径生成器的用途。
如何使用CSS边界半径生成器？
选择预设或重新开始
选择一个预设，例如圆形、药丸、圆形或 Blob 以获得即时起点，或从默认的圆角开始。
调整每个角落
拖动左上、右上、右下和左下滑块以独立地对每个角进行舍入，或将它们全部设置为均匀半径的相同值。
选择一个单位
Px、%、em、rem之间切换,百分比创建相对于元素大小的椭圆角- 在所有角上设置50%,以形成完美的圆或椭圆。
复制CSS
复制生成的边框半径声明，折叠到最短的有效速记，并将其粘贴到样式表中。
主要特点
每角控制
所有四个角的独立滑块可让您构建不对称的形状，如叶子、制表符和语音泡沫半径，而不仅仅是统一的舍入
最短有效输出
该工具会自动将您的四个角折叠成最短的等效边框半径速记，使您的CSS保持清洁和可读性
多个单元
Px、%、em 和 rem 之间的切换 - 相对于盒子尺寸,百分比会产生椭圆形角,这就是圆形和斑点的制作方式
实时预览
拖动时预览元素会立即更新，因此您可以在复制任何内容之前准确查看角落的圆形
Frequently Asked Questions
Related Tools
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!