background奇淫巧技——邮票镂空半圆效果

邮票样式实现！

先上代码

.box {
    width: 260px;
    height: 145px;
    background-image: radial-gradient(circle at 10px 10px, transparent 10px, #c366fd 10px, #c366fd 100%);
    background-size: 100% 25px;
    background-position: -10px 25px;
}

核心原理：

1. 利用radial-gradient渐变实现透明圆形
2. background-size控制背景为长条
3. background-position定位背景裁剪半圆
4. 默认repeat重复图片实现效果