使用 border-radius 绘制复杂不规则圆角的核心方法是利用斜杠 / 分隔水平半径和垂直半径，从而为每个角独立指定椭圆参数。通过设置四个角的值（如 10px 20px / 30px 40px），可以精确控制左上、右上、右下、左下四个角的形状差异，实现非对称的复杂曲线效果。
如何为单个角设置独立的水平和垂直半径
要实现不规则圆角，必须理解 border-radius 接受两个值的语法：第一个值是水平半径，第二个是垂直半径。当这两个值不相等时，浏览器会绘制一个椭圆弧而非圆弧。例如，将左上角设置为 50px 10px，意味着该角在水平方向延伸 50px，垂直方向延伸 10px，形成一个扁平的椭圆切角。这种机制允许开发者打破传统正方形圆角的限制，创造出类似胶囊、水滴或有机形态的边界。
.irregular-box {
width: 300px;
height: 200px;
background-color: #3498db;
/* 左上: 水平50px/垂直10px, 右上: 水平10px/垂直50px */
/* 右下: 水平50px/垂直10px, 左下: 水平10px/垂直50px */
border-radius: 50px 10px / 10px 50px;
}
上述代码中，border-radius 的值分为两组，由斜杠 / 分隔。斜杠前的 50px 10px 分别对应左上角和右下角的水平半径，而斜杠后的 10px 50px 对应左上角和右下角的垂直半径。右上角和左下角则自动继承对角线的参数。运行此代码后，元素将呈现一种动态的倾斜椭圆感，而非标准的对称圆角。
如何通过百分比值实现响应式不规则圆角
除了像素值，border-radius 还支持百分比，这使得不规则圆角能够适应不同尺寸的容器。百分比基于元素的宽度和高度计算：水平半径百分比基于宽度，垂直半径百分比基于高度。例如，50% 0 / 0 50% 可以创建一个半圆形或四分之一圆的效果，具体取决于容器的宽高比。这种方法常用于创建卡片的一角折叠效果或特定的图形设计需求。
.responsive-corner {
width: 200px;
height: 200px;
background-color: #e74c3c;
/* 左上: 水平50%/垂直0%, 右上: 水平0%/垂直50% */
/* 右下: 水平50%/垂直0%, 左下: 水平0%/垂直50% */
border-radius: 50% 0 / 0 50%;
}
在这个示例中，50% 0 / 0 50% 的设置使得左上角和右下角在水平方向上占据容器宽度的一半，而在垂直方向上不产生圆角（即直角）。相反，右上角和左下角在垂直方向上占据高度的一半，水平方向为直角。这种组合创造了一种不对称的视觉平衡。如果容器变为矩形，例如宽度大于高度，椭圆的形状会随之拉伸，保持比例关系不变。
当水平与垂直半径之和超过边长时会发生什么
在使用 border-radius 绘制复杂形状时，必须注意几何约束。如果某个角的水平半径与垂直半径之和超过了该角所在边的长度，浏览器会自动调整半径，使其总和等于边长。这意味着你无法通过设置过大的半径来“溢出”容器边界。例如，在一个宽度为 100px 的元素上，如果左上角的水平半径设为 60px，垂直半径设为 60px，由于 60+60=120 > 100，浏览器会将实际渲染的半径调整为 50px x 50px，确保圆角完全包含在元素内部。这一行为保证了布局的稳定性，防止内容被意外裁剪或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
