边缘虚化虚线

RT:

#container {
            width: 700px;
            height: 300px;
            outline: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }

#container>div {
    width: 650px;
    height: 10px;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #fff 0, #fff 20px),
    linear-gradient(to right, white, black 20% 80%, white);
}