如何限制优惠券卡片侧边半圆数量为4个

要解决background-repeat: repeat-y导致半圆无限重复的问题，我们可以直接定义4个独立的背景层（左右各2个），精准控制每个半圆的位置，无需依赖重复属性。

修改后的完整代码如下：

.card-coupon {
    height: 120px;
    border-radius: 6px;
    width: 100%;
    max-width: 300px;
    padding: 12px 18px;
    background: 
      /* 左侧两个半圆 */
      radial-gradient(8px at left, transparent 98%, #fff) top 20px left,
      radial-gradient(8px at left, transparent 98%, #fff) top 80px left,
      /* 右侧两个半圆 */
      radial-gradient(8px at right, transparent 98%, #fff) top 20px right,
      radial-gradient(8px at right, transparent 98%, #fff) top 80px right;
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-color: #fff;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.12));
}

body {
    background: gray;
}

<div class="card-coupon"></div>

关键调整说明： #

• 移除重复属性：删掉background-repeat: repeat-y，改用no-repeat，避免背景无限重复
• 拆分背景层：将背景拆分为4个独立的径向渐变，分别对应左侧两个、右侧两个半圆，精准控制数量
• 添加主体背景色：新增background-color: #fff，让优惠券卡片主体显示白色（原代码仅定义了半圆部分，缺少主体背景）
• 调整垂直位置：通过top值（如top 20px、top 80px）控制半圆的垂直分布，可根据需求自行修改数值调整间距

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