CSS实现X号球

在做一些页面开发中，我们难免会遇到一些列表排序的问题，那么有一些需求就要求对前三名有一些特殊的样式

代码如下

CSS样式

        .circle {

            width: 24px;

            height: 24px;

            border-radius: 50%;

            color: white;

            line-height: 100px;

            text-align: center;

            font-size: 14px;

            font-weight: 500;

            line-height: 22px;

            background: linear-gradient(180deg, #FFDB49 0%, #814700 99%);

            border-image: linear-gradient(180deg, #FFEF8A 0%, rgba(241, 210, 108, 0.33) 100%);

            box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.44);

        }

    <div class="circle">

        1

    </div>