CSS 圆角可视化工具

边框圆角语法

CSS border-radius 属性可以设置元素边框圆角。完整语法如下：

/* 所有四个角相同 */
border-radius: radius;

/* 四个角分别设置 */
border-radius: top-left top-right bottom-right bottom-left;
              

单独属性

也可以使用单独的属性设置每个角：

border-top-left-radius: radius;
border-top-right-radius: radius;
border-bottom-right-radius: radius;
border-bottom-left-radius: radius;
              

椭圆形圆角

可以为每个角设置两个值，分别控制水平和垂直半径：

/* 水平/垂直半径 */
border-radius: 10px / 20px;

/* 每个角不同的水平/垂直半径 */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
              

常见用途

• 创建圆形或椭圆形按钮
• 柔化界面元素，如卡片、面板等
• 创建气泡或对话框效果
• 制作徽章或标签
• 创建圆形头像或图片

单位选择

• 像素 (px)：固定大小，适合精确控制
• 百分比 (%)：相对于元素尺寸，适合响应式设计
• em/rem：相对于字体大小，适合可缩放界面

使用技巧

• 使用 50% 可以创建完美的圆形（当元素宽高相等时）
• 只设置特定角的圆角可以创建独特形状
• 结合 overflow: hidden 可以裁剪内容为圆角形状
• 圆角与阴影结合可以创建更自然的界面元素
• 避免过大的圆角值，可能导致意外的视觉效果