关于反border-radius,虽然大概知道应该怎么实现,但是真上手写还是写不出来,这里简单记录一下

    1. .header-after {
    2. position: absolute;
    3. right: 0;
    4. bottom: 0;
    5. width: 20px;
    6. height: 20px;
    7. background: white;
    8. border-radius: 50%;
    9. transform: translate(10px, 10px);
    10. &-after {
    11. position: absolute;
    12. right: 0;
    13. bottom: 0;
    14. width: 20px;
    15. height: 20px;
    16. background: rgba(232, 231, 237);
    17. border-radius: 50%;
    18. transform: translate(10px, -10px);
    19. }
    20. }

    大致逻辑就是,先造一个白色的底,20 * 20的圆,放在卡片后面,再用另一个与背景色相同的灰色圆,对上面的白色进行覆盖,使得白色只露出我们需要的部分,也就是border-radius除去之后剩下的部分