box-shadow内阴影实现各种效果收集

.moon {
    display:inline-block;
    height: 1.5em;
    width: 1.5em;
    box-shadow: inset -.4em 0 0;
    border-radius: 2em;
    transform: rotate(20deg);
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>

/* 定义svg */
.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    stroke-width: 2;
    stroke: #fff;
    box-shadow: inset 0px 0px 0px #7ac142; 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

.cover::before {
    content: '';
    width: 100%; 
    height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; 
    top: -400px;
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}