在toyhou.se中实现椭圆边框效果的border-radius替代方案

针对toyhou.se不支持border-radius: 水平值 / 垂直值这种复合语法、仅允许内联CSS的限制，以下是几种可行的蛋形替代实现方案：

方案1：transform缩放+基础圆形 #

利用transform: scaleY()纵向拉伸圆形元素，快速模拟蛋形效果，适合对弧度要求不极致的场景：

<div style="width: 200px; height: 200px; border-radius: 50%; transform: scaleY(1.2); background: #ffd07b; transform-origin: center;"></div>

• 调整scaleY()的数值可以控制蛋形的纵向拉伸程度（比如1.3会更细长）
• 如果内部有内容，需要给内部元素添加transform: scaleY(0.83)（1/1.2的倒数）反向缩放，避免内容变形

方案2：clip-path精确绘制蛋形 #

使用CSS clip-path的椭圆或多边形语法，直接定义蛋形的轮廓，支持更精细的弧度调整：

椭圆版（简洁易调） #

<div style="width: 200px; height: 240px; background: #ffd07b; clip-path: ellipse(50% 60% at 50% 25%);"></div>

• ellipse(50% 60% at 50% 25%)参数说明：水平半径占宽度50%，垂直半径占高度60%，中心点垂直偏移25%（实现上宽下窄的蛋形）
• 修改最后一个百分比可以调整蛋形的重心位置

多边形版（自定义弧度） #

如果需要更贴合拓麻歌子的蛋形弧度，可以手动调整多边形坐标：

<div style="width: 200px; height: 240px; background: #ffd07b; clip-path: polygon(50% 0%, 95% 15%, 100% 45%, 90% 75%, 50% 100%, 10% 75%, 0% 45%, 5% 15%);"></div>

• 每个坐标点对应轮廓的关键位置，通过微调百分比可以精准匹配目标形状

方案3：嵌套div组合裁剪 #

利用外层div的基础border-radius和overflow:hidden，配合内层元素的圆角调整，实现近似蛋形：

<div style="width: 200px; height: 240px; overflow: hidden; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 80px; border-bottom-right-radius: 80px;">
  <div style="width: 100%; height: 100%; background: #ffd07b;"></div>
</div>

• 外层的四个圆角值分别对应左上、右上、右下、左下的圆角半径（根据元素宽高调整数值，比如宽度200px时，顶部圆角设为100px，底部设为80px）
• 该方案依赖toyhou.se支持单个方向的border-radius设置（四个值的语法）

内容的提问来源于stack exchange，提问作者Posi