CSS圆角生成器
可视化CSS圆角生成器，独立调整每个角的圆角半径，实时预览并即时复制生成的CSS代码。
什么是CSS border-radius？
CSS border-radius是一个用于圆角化元素外边框边缘的属性。可以使用一到四个值独立设置每个角，也可以使用border-top-left-radius等长属性单独控制每个角。
如何用border-radius制作完美圆形？
在正方形元素（宽高相等）上设置border-radius为50%即可创建完美圆形。对于椭圆，在矩形元素上使用border-radius: 50%。
border-radius可以使用哪些单位？
border-radius支持px、%、em、rem、vw、vh等CSS长度单位。百分比相对于元素的尺寸，而px等绝对单位提供固定值。
border-radius的简写语法是什么？
简写遵循以下模式：左上 右上 右下 左下。一个值应用于所有角。两个值分别设置左上/右下和右上/左下。三个值分别设置左上、右上/左下和右下。
能创建椭圆形圆角吗？
可以，使用斜杠（/）语法可以分别定义水平和垂直半径。例如border-radius: 50% / 100px创建一个具有不同水平和垂直半径的椭圆曲线。
border-radius适用于所有元素吗？
border-radius适用于大多数HTML元素，包括div、button、img和input。但在没有设置overflow: hidden的元素上可能不会裁剪溢出内容。
能用border-radius创建复杂形状吗？
可以，通过为每个角组合不同的半径值，可以创建胶囊形、椭圆形、叶子形和自定义有机形状。百分比值非常适合响应式设计。
border-radius在所有浏览器中都支持吗？
是的，border-radius在所有现代浏览器中都支持，包括Chrome、Firefox、Safari、Edge和移动浏览器。自2011年以来就是CSS3的一部分，兼容性极好。
如何制作胶囊形按钮？
将border-radius设置为等于或大于元素高度一半的值。对于40px高的按钮，使用border-radius: 20px或更高值即可创建胶囊形状。
border-radius会影响背景图片吗？
是的，border-radius会裁剪元素的背景、背景图片和边框。背景会自动跟随圆角。
可以对border-radius做动画吗？
可以，border-radius支持CSS过渡和动画。可以在不同的半径值之间平滑过渡，创建交互式的悬停和点击效果。
border-radius可以和CSS变换一起使用吗？
可以，border-radius与rotate、scale和translate等CSS变换配合良好。圆角会随元素一起变换。
如何创建带边框的圆形？
在宽高相等的正方形元素上应用border-radius: 50%，然后添加border属性。边框会跟随圆形形状。
单独角属性和简写有什么区别？
border-top-left-radius等单独属性可以精确控制每个角。简写border-radius可以在一个声明中设置多个角。两者产生完全相同的CSS输出。
如何使用CSS圆角生成器
用这款 CSS border-radius 生成器直观地设计圆角。全部在本地浏览器中运行，你的数据不会上传到任何服务器。
- 在 Unit 下拉框中选择 px、%、em 或 rem 单位。
- 拖动 Top Left、Top Right、Bottom Right、Bottom Left 四个滑块，独立调整每个角的圆角大小。
- 打开 Link all corners 开关，可让四个角统一使用同一个数值。
- 从预览中复制生成的 CSS，粘贴到你的样式表里。
把四个角都设为 50% 可得到正圆或胶囊形；使用 em 或 rem 能让圆角随字号自动缩放。
相关工具
- CSS 阴影生成器 免费在线 CSS box-shadow 生成器。可视化创建精美阴影，可调整偏移、模糊、扩展、颜色和内阴影。实时预览，即时复制代码。
- CSS 渐变生成器 可视化创建精美 CSS 渐变。生成支持多色标、自定义角度和位置的线性、径向和锥形渐变。即时复制可投入生产的 CSS 代码。
- CSS Grid生成器 免费在线可视化CSS Grid生成器，实时预览。交互式创建响应式网格布局，一键导出生产级CSS代码。
- CSS Flexbox生成器 可视化CSS Flexbox生成器,实时预览。调整Flex属性,即时获取可用的CSS代码。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。