CSS – 边框圆角 border-radius

border-radius

border-radius 可以通过值来定义样式相同的角，也对每个角分别定义

值说明

border-radius : *px  -> 将创建四个大小一样的圆角

border-radius : *px *px  -> 第一个值表示左上角和右下角；第二个值表示右上角和左下角

border-radius : *px *px *px  -> 第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角

border-radius : *px *px *px *px  -> 四个值分别表示左上角、右上角、右下角、左下角

*椭圆圆角控制

border-radius 的圆角原理，是在一个矩形以若着px作为一个圆的半径，画一个与矩形边框相切的边，图解如下

同时我们也可以通过控制这个切线圆的X轴边长和Y轴边长来控制来自X轴的切线和Y轴的切线，来达到切出不平衡的圆角：

用法：通过添加“ / ”来设置当前不同方向的半径值，其值是

border-radius : 水平x轴长度 / 垂直y轴长度

也可以通过下面四个属性进行单独角的设置

border-top-left-radius: 100px 50px;    -->  表示左上角
border-top-right-radius: 100px 50px;   -->  表示右上角
border-bottom-right-radius: 100px 50px;   -->  表示右下角
border-bottom-left-radius: 100px 50px;   -->  表示左下角

同时也可以使用简写方法分别对四个角设置椭圆角

border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
border-radius: 左上x轴 右上x轴 右下x轴 左下x轴/左上y轴 右上y轴 右下y轴 左下y轴;

通过设置椭圆圆角，可以做出很奇怪的图形

border-radius: 100px 80px 60px 40px/40px 50px 60px 70px;

以下为上面代码参数的效果图