<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background-color: deeppink; border-radius: 50%; } </style> </head> <body> <div class="box"></div> <!-- | | | ----------------- border-radius: 30px 40px 50px 60px / 30px 40px 50px 60px; 相当于直接写30px 40px 50px 60px 对应左上 右上 右下 坐下(左上开始的顺时针) 第一个 / 第一个 对应椭圆 长半轴 / 短半轴 30% 40% 50% 60% / 30% 40% 50% 60%; 第一个 / 第一个 对应椭圆长 半轴长度30% / 短半轴长度30% 圆 .box{ width: 200px; height: 200px; background-color: deeppink; border-radius: 50% } --> </body> </html>