如何使用ClipPath使其不会在子小部件之外裁剪？

<style>
    .parent {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }
    
    .parent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: circle(50% at center);
    }
    
    .child {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>